在日常的后台管理系统开发中，面包屑导航 是一个非常常见的功能。它可以清晰地展示用户的访问路径，并且允许用户快速返回上级页面。

本文将介绍如何基于 Vue3 + Vue Router + Ant Design Vue 来实现一个 动态面包屑组件，并支持路径校验和点击跳转。

📌 功能需求

• 动态生成面包屑
  根据当前路由 path 自动生成层级导航。

• 路径校验
  只有绑定了组件的路径才允许跳转，否则禁用点击。

• 高可用
  结合 Ant Design Vue 的 Breadcrumb 组件，样式简洁大方。

  ---

  🛠 实现思路

• 使用 useRoute 获取当前路由信息，拆分 path 路径。

• 结合 nameMap（路径映射名称表），生成对应的面包屑文本。

• 利用 router.resolve 判断路径是否存在有效组件，从而决定是否可以跳转。

• 点击面包屑时，调用 router.push 进行页面跳转。

📂 项目文件结构

src/
├── components/
│   └── Breadcrumb.vue         # 面包屑组件
│
├── constants/
│   └── breadcrumb.ts          # 面包屑名称映射表
│
├── views/
│   ├── Home.vue               # 主布局（左侧菜单）
│   │
│   └── AppStore/              # 应用商店
│      ├── index.vue
│      └── Gps-application/    # GPS应用
│           └── index.vue
│   
│
├── router/
│   └── index.ts               # 路由配置
│
└── App.vue

💻 完整代码

<template>
  <div class="breadcrumb" >
    <a-breadcrumb>
      <a-breadcrumb-item
        v-for="(item, index) in breadcrumbs"
        :key="index"
        @click="onBreadcrumbClick(item, index)"
        :style="{ cursor: item.canNavigate && index !== breadcrumbs.length - 1 ? 'pointer' : 'not-allowed' }"
      >
        {{ item.label }}
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { nameMap } from "../constants/breadcrumb";

const router = useRouter();
const route = useRoute();


// 判断路径是否绑定组件
const isPathValid = (path: string): boolean => {
  const resolved = router.resolve(path);
  const matched = resolved.matched.find(r => r.path === path);
  return !!(matched && matched.components?.default);
};

// 构造面包屑
const breadcrumbs = computed(() => {
  const result: { label: string; path: string; canNavigate: boolean }[] = [];
  const segments = route.path.split("/").filter(Boolean);

  // 去掉 home，只显示 home 后面的路径段
  const restSegments = segments.slice(1);
  let currentPath = "/home";
  for (const seg of restSegments) {
    currentPath += `/${seg}`;
    result.push({
      label: nameMap[seg] || seg,
      path: currentPath,
      canNavigate: isPathValid(currentPath),
    });
  }

  return result;
});

// 点击面包屑跳转
const onBreadcrumbClick = (item: { path: string; canNavigate: boolean }, index: number) => {
  if (!item.canNavigate || route.fullPath === item.path) return;
  router.push(item.path);
};
</script>

<style scoped lang="less">
.breadcrumb {
  padding: 20px;
}
</style>

📚 nameMap 示例

在 constants/breadcrumb.ts 文件中定义路径与显示名称的映射：

export const nameMap: Record<string, string> = {
  "app-store": "应用商店",
  "Gps-application": "GPS应用",
};

🎨 效果展示

假设当前路由为：

/home/app-store/Gps-application/

则面包屑展示为：

• 如果路径存在有效组件，鼠标样式为 pointer，点击即可跳转。

• 如果路径未配置对应组件，鼠标样式为 not-allowed，禁止点击。

✅ 总结

通过以上方法，我们实现了一个 动态可点击的面包屑导航组件，它具备以下优点：

• 自动根据路由生成，无需手动维护。

• 路径可读性强，可灵活映射中文名称。

• 支持路径校验，避免跳转到无效页面。

这种方式在后台管理系统和多层级页面应用中非常实用，大家可以根据自己项目的实际需求进行扩展。