Vue3.5 企业级管理系统实战（十）：面包屑导航组件

1 breadcrumb 组件

1.1 安装插件 path-to-regexp

首先，我们需要安装插件 path-to-regexp，以便在下面的面包屑组件中对路由地址进行解析。

`path-to-regexp`是一个 JavaScript 库，可将路径字符串转化为正则表达式，广泛用于 Web 开发中的路由匹配和参数解析。借助它，开发者能定义含参数的路径模板，如`/user/:id`，并将其编译成正则表达式以测试路径是否匹配，还能解析出路径中的参数值。

`compile`是`path-to-regexp`中的一个实用函数，它根据路径模板生成反向填充路径的函数。通过传入参数对象，可将参数填充到路径模板里，生成完整的路径字符串。同时，它会自动对参数进行 URL 编码，保证生成的路径合法，为路径处理提供了便利。

通过 pnpm 安装 path-to-regexp

pnpm install path-to-regexp

1.2 breadcrumb 组件开发

在 /src/layout/components 下新建 BreadCrumb 文件夹，新建 index.vue 文件，代码如下：

///src/layout/components/BreadCrumb/index.vue
<template><!-- 创建一个面包屑导航组件，设置分隔符为 /，并添加一些样式类 --><el-breadcrumb separator="/" leading-50px text-lg ml-30px inline-block><!-- 遍历 list 数组，为每个路由生成一个面包屑项 --><!-- a.path 可能是一个路由参数导航 /test/index/:id --><el-breadcrumb-item v-for="(route, index) in list" :key="route.path"><!-- 如果是最后一个面包屑项，使用 span 标签显示标题，并且置灰 --><span v-if="list.length - 1 === index">{{ route.meta?.title }}</span><!-- 如果不是最后一个面包屑项，使用 a 标签，点击时调用 handleLink 方法进行页面跳转 --><a v-else @click="handleLink(route)">{{ route.meta?.title }}</a></el-breadcrumb-item></el-breadcrumb>
</template><!-- dashboard -->
<script lang="ts" setup>
// 导入路由实例
import router from "@/router";
// 导入 vue-router 中的 RouteLocationMatched 类型
import { RouteLocationMatched } from "vue-router";
// 导入 path-to-regexp 库中的 compile 函数，用于将路径模板和参数组合成完整路径
import { compile } from "path-to-regexp";// 定义 PartialRouteLocationMatched 类型，只取 RouteLocationMatched 的部分属性
type PartialRouteLocationMatched = Partial<RouteLocationMatched>; // 获取当前路由信息
const route = useRoute();
// 定义响应式变量 list，用于存储面包屑导航列表
const list = ref<PartialRouteLocationMatched[]>([]);// 定义获取面包屑导航列表的函数
const getBreadCrumb = () => {// 过滤出有 meta.title 属性的路由匹配项let matched = route.matched.filter((match) => match.meta.title) as PartialRouteLocationMatched[];// 如果当前访问的不是首页，在面包屑列表开头添加首页项if (matched[0]?.path !== "/dashboard") {//  当前访问的不是首页，增加匹配项目（首页的面包屑一直存在）matched = [{path: "/dashboard",meta: {title: "dashboard"}},...matched];}// 过滤掉 meta.breadcrumb 为 false 的路由匹配项list.value = matched.filter((match) => match.meta?.breadcrumb !== false);
};// 监听路由路径的变化，当路径变化时调用 getBreadCrumb 函数，并且在组件初始化时立即执行一次
watch(() => route.path, getBreadCrumb, { immediate: true });// 定义编译路径的函数，根据路径模板和当前路由参数生成完整路径
function compilePath(path: string) {// 获取当前路由的参数const params = route.params;// 使用 compile 函数将路径模板和参数组合成完整路径const resultPath = compile(path)(params);return resultPath;
}// 定义处理面包屑项点击事件的函数
function handleLink(route: PartialRouteLocationMatched) {// 解构出路由的 path 和 redirect 属性const { path, redirect } = route;// 如果存在 redirect 属性，使用 router.push 进行重定向if (redirect) {return router.push(redirect as string);}// 否则，使用 compilePath 函数生成完整路径并进行跳转router.push(compilePath(path!));
}
</script>

2 Navbar 引入

在 /src/layout/components/Navbar.vue 中引入 breadcrumb 组件，代码如下：

///src/layout/components/Navbar.vue
<template><div class="navbar" flex><hamburger@toggleCollapse="toggleSidebar":collapse="sidebar.opened"></hamburger><BreadCrumb></BreadCrumb></div>
</template><style scoped lang="scss">
.navbar {@apply h-[var(--navbar-height)];
}
</style><script lang="ts" setup>
import { useAppStore } from "@/stores/app";
// 在解构的时候要考虑值是不是对象，如果非对象解构出来就 丧失响应式了
const { toggleSidebar, sidebar } = useAppStore();
</script>