当前位置：首页 > news >正文

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

news 来源：原创 2025/6/10 4:20:34

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>