VUE+elementui面包屑实现动态路由详解

我的路由：

const routerMap = [
 {
   path: '/',
   redirect: 'dashboard',
   component: Layout,
   name:'Dashboard',
   children: [
     {
       path: 'dashboard',
       component: () => import('@/view/dashboard'),
       name: 'Dashboard',
       meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
     }
   ]
 },{
   path:'/test',
   component:Layout,
   redirect: '/test/index',
   name:'Test',
   meta:{title:'test',icon:'lock'},
   children:[
     {
       path:'index',
       component:()=>import('@/view/test'),
       name:'test',
       meta:{title:'test', icon: 'example', noCache: true }
     },{
       path:'example',
       component:()=>import('@/view/test/example'),
       name:'example',
       meta:{title:'example',icon:'404'}
     }
   ]
 }
]

面包屑代码：

<template>
 <div class="navbar clearfix">
   <el-breadcrumb class="breadcrumb-container" separator-class="el-icon-arrow-right">
     <el-breadcrumb-item v-for="item in levelList":key="item.path" :to="item.path">{{item.meta.title}}</el-breadcrumb-item>
   </el-breadcrumb>
 </div>
</template>

<script>
 export default {
   name: 'Navbar',
   data() {
     return {
       levelList: []
     }
   },
   watch: {
     $route() {
       this.getBreadcrumb()
     }
   },
   created(){
     this.getBreadcrumb()
   },
   methods:{
     getBreadcrumb() {
       let matched = this.$route.matched.filter(item => item.name)
       const first = matched[0];
       if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
         matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
       }
       this.levelList = matched
     }
   }
 }
</script>

原理：通过监听当前路由的变化，动态更新面包屑的内容。

来源：https://blog.csdn.net/lzcwds/article/details/82625024