[vue]vue+matched 生成一个自己的面包屑

最近写了一个后台的demo，由于需求需要根据自己的路由生成一个面包屑；所以去网上搜索了一下对网上的代码进行了整合理解；顺便做一个记录以便日后查看。
1.首先来看看需求

企业管理 > 档案管理 > 许可申请

在这次的demo中我们要根据用户点击不同导航时改变面包屑的状态
2.再让我们来看看我们的路由吧
 

{
            path: '/systemManagement',
            name: 'systemManagement',
            component: () => import(/* webpackChunkName: "about" */ '../components/qygl.vue'),
            meta: {title:'企业管理'},
            children:[
              {
                path: '/fileManagement',
                name: 'fileManagement',
                component: () => import(/* webpackChunkName: "about" */ '../components/qygl/dagl.vue'),
                meta: {title:'档案管理'},
                children:[
                  {
                    path: '/',
                    name: 'PersonnelInformation',
                    component: () => import(/* webpackChunkName: "about" */ '../components/qygl/PersonnelInformation.vue'),
                  },
                  {
                    path: '/Applicationforpermission2',
                    name: 'Applicationforpermission2',
                    component: () => import(/* webpackChunkName: "about" */ '../components/qygl/Applicationforpermission2.vue'),
                    meta: {title:'许可申请'}
                  },
                ]
             },
          ]
}

此处的路由逻辑为：企业管理 > 档案管理 > 许可申请
3.那么我们应该如何实现呢？
当然是选择使用matched了啦，那matched是什么呢？
matched返回的是一个数组，包含了当前路由的所有嵌套路径的路由记录，那么我们怎么得知当前匹配的路由的信息以及如何展示给用户呢？
vue在路由中有一个meta属性，里面可以包含许多的信息，那么既然这样是不是我们就可以在这里做文章了呢，答案是肯定的，我们可以给meta属性加上一个title属性，在title中添加我们对当前路由的一些解释，就像这样

meta: {title:'许可申请'}

那么我们这样配置好路由后，怎么实现呢?
直接先上代码吧
export default {
      name: "breadcrumb",
       data() {
             return {
                  levelList: []
               }
          }，
        watch: {
            $route() {
                   this.getBreadcrumb()
             }
          }，
         created(){
               this.getBreadcrumb()
         }，
         methods:{
               getBreadcrumb() {
                    //$route.matched一个数组 包含当前路由的所有嵌套路径片段的路由记录
                  let matched = this.$route.matched.filter(item => item.name)
                  const first = matched[0];
                  if (first && first.name.trim().toLocaleLowerCase() !== 'Home'.toLocaleLowerCase()) {
                           matched = [{ path: '/Home ', meta: { title: 'Home' }}].concat(matched)
                 }
                  this.levelList = matched
                }
         }
 }  
这里，我们定义了一个函数去得到当前路由的记录，并将其存入数组中，供给组件调用，在创创建完成后调用了该函数，
watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态,所以我们使用了watch去监听整个路由的变化情况


template中的代码
  

<div class="navbar clearfix">
        <el-breadcrumb class="breadcrumb-container" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><router-link to="/BackStageHome">首页</router-link></el-breadcrumb-item>
            <div class="router">
                <el-breadcrumb-item class="whitec" v-for="item in levelList":key="item.path" :to="item.path">pw_item.meta.title</el-breadcrumb-item>
            </div>
        </el-breadcrumb>
    </div>

这里的逻辑是在页面中遍历得到的levelList数组，将其中的路由提取出来，并生成面包屑。我在这里使用的是elementUI ，大家也可以根据自己的需求进行设计 以上这篇Vue路由对象属性matched就是我分享给大家的内容了，如有不对的地方欢迎大家的指正。

张菊666啊