主要是利用vue 路由 route.matched属性 matched文档说明

本节目标
image.png

2-1 route.matched

与给定路由地址匹配的标准化的路由记录数组。

当路由路径是 /system/menu时 会匹配到两条路由记录
image.png
每条记录里 有我们所需要的meta字段
image.png
route.meta.title会作为路由面包屑导航名称，如果没有title就不显示在面包屑导航

2-2 导入element的面包屑组件 ElBreadcrumb和 ElBreadcrumbItem

image.png

2-3 安装path-to-regexp（这里有坑 不明确）

path-to-regexp可以将动态路由路径/user/:id 转换成正则表达式。Path-to-RegExp

  1. # 安装固定版本
  2. npm install path-to-regexp@6.2.0 --save
  4. # npm默认安装使用时
  5. # import { compile } from 'path-to-regexp' 
  6. # 老报错compile函数是undefined 时好时坏

这里我们要用它解决 面包屑导航是动态路由的情况下，点击面包屑导航router.push跳转时 怎么把动态参数填充进去 拼接成正常路由 /user/:class/role/:id + {id: 2, class: 3} => /user/3/role/2 然后正确跳转

  1. 例如：动态路径是 /user/:class/role/:id  我们要将{id: 2, class: 3}填充为完整路径 然后才能正确跳转
  3. const { compile } = require('path-to-regexp')
  5. const toPath = compile('/user/:class/role/:id')
  7. const path = toPath({ id: 2, class: 3 })
  8. console.log('path:', path) // path: /user/3/role/2

2-4 创建Breadcrumb组件

src/components/Breadcrumb/index.vue

  1. <template>
  2.   <el-breadcrumb class="app-breadcrumb breadcrumb-container" separator="/">
  3.     <el-breadcrumb-item
  4.       v-for="(item, index) in levelList"
  5.       :key="item.path"
  6.     >
  7.       <!-- 面包屑导航最后一个是不可点击的 因为最后一个正是当前所显示的路由 -->
  8.       <span
  9.           v-if="index == levelList.length - 1"
  10.           class="no-redirect"
  11.         >
  12.           {{ item.meta.title }}
  13.       </span>
  14.       <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
  15.     </el-breadcrumb-item>
  16.   </el-breadcrumb>
  17. </template>
  19. <script lang="ts">
  20. import { defineComponent, ref, watch, onBeforeMount } from 'vue'
  21. import { useRoute, useRouter, RouteLocationMatched, RouteLocationRaw } from 'vue-router'
  22. import { compile } from 'path-to-regexp'
  24. type PartialRouteLocationMatched = Partial<RouteLocationMatched>
  26. export default defineComponent({
  27.   name: 'Breadcrumb',
  28.   setup() {
  29.     const route = useRoute() // 相当于this.$route对象
  30.     const router = useRouter() // 相当于this.$router对象
  31.     const levelList = ref<Array<PartialRouteLocationMatched>>([]) // 导航列表 存放matched里筛选的路由记录
  33.     // 判断是不是Dashboard路由
  34.     const isDashboard = (route?: PartialRouteLocationMatched) => {
  35.       const name = route && route.name
  36.       if (!name) {
  37.         return false
  38.       }
  39.       return (name as string).trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
  40.     }
  42.     // 获取面包屑导航
  43.     const getBreadcrumb = () => {
  44.       // 对匹配的路由进行过滤 过滤掉没有title属性的路由，没有title就无法作为面包屑导航
  45.       let matched = route.matched.filter(item => item.meta && item.meta.title) as PartialRouteLocationMatched[]
  46.       // 获取第一个匹配路由记录
  47.       const first = matched[0]
  48.       // 我们要把dashboard作为首页 始终固定在面包屑导航第一个 Dashboard/System/Menu Management
  49.       // 如果第一个匹配到的路由记录不是dashboard 我们自己就把它放在记录数组的第一项
  50.       if (!isDashboard(first)) {
  51.         matched = ([{
  52.           path: '/dashboard',
  53.           meta: {
  54.             title: 'Dashboard'
  55.           }
  56.         }] as PartialRouteLocationMatched[]).concat(matched)
  57.       }
  58.       // route.meta.breadcrumb自定义属性 如果为false 匹配到时 将不会再面包屑导航显示该路由
  59.       // {
  60.       //  path: 'menu',
  61.       //  meta: {
  62.       //    title: 'Menu Management',
  63.       //    breadcrumb: false // 不显示在面包屑导航 默认true
  64.       //  }
  65.       // }
  66.       levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
  67.     }
  69.     onBeforeMount(() => {
  70.       getBreadcrumb()
  71.     })
  73.     watch(() => route.path, () => {
  74.       getBreadcrumb()
  75.     })
  77.     // 主要是针对 动态路由 /user/:id 进行动态参数填充
  78.     // path-to-regexp 文档说明 https://www.npmjs.com/package/path-to-regexp
  79.     const pathCompile = (path: string) => {
  80.       // 根据路径变编译成正则函数 并接收具体参数 比如根据正则/user/:id 帮你将:id替换成具体路径
  81.       const toPath = compile(path)  // 比如 path /user/:id
  82.       const params = route.params // { id: 10 }
  83.       return toPath(params) // toPath({ id: 10 }) => /user/10 返回填充后的路径
  84.     }
  86.     // 点击面包屑导航可跳转
  87.     const handleLink = (route: RouteLocationMatched) => {
  88.       const { path, redirect } = route
  89.       // 如果是重定向路由 就走重定向路径
  90.       if (redirect) {
  91.         router.push(redirect as RouteLocationRaw)
  92.         return
  93.       }
  94.       router.push(pathCompile(path))
  95.     }
  96.     return {
  97.       levelList,
  98.       handleLink
  99.     }
  100.   }
  101. })
  102. </script>
  104. <style lang="scss" scoped>
  105. .app-breadcrumb.el-breadcrumb {
  106.   display: inline-block;
  107.   /* float: left; */
  108.   line-height: 50px;
  109.   font-size: 14px;
  110.   margin-left: 8px;
  111. }
  113. .no-redirect {
  114.   color: #97a8be;
  115.   cursor: text;
  116. }
  117. </style>
  119. <style lang="scss">
  121. .breadcrumb-enter-active,
  122. .breadcrumb-leave-active {
  123.   transition: all .5s;
  124. }
  126. .breadcrumb-enter,
  127. .breadcrumb-leave-active {
  128.   opacity: 0;
  129.   transform: translateX(20px);
  130. }
  132. .breadcrumb-leave-active {
  133.   position: absolute;
  134. }
  136. .breadcrumb-move {
  137.   transition: all .5s;
  138. }
  139. </style>

本节参考源码

https://gitee.com/brolly/vue3-element-admin/commit/45c652324fed0f105d02ae40d61614d158a2c2b8