vue实现面包屑的方法

<template>
    <div class="breadcumb">
        <ul>
          <li v-for="(v,i) in lists" :key="i">
            <router-link :to="{path:v.path}">{{v.meta.title}}</router-link>
            <span v-if="i<lists.length-1">/</span>
          </li>
        </ul>
      </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return {
      lists:[]
    }
  },

  //监听路由变化
  watch:{
    $route(to,from){
      let matched = to.matched;   //this.$route.matched
      //这个地方是为了固定第一级目录是首页不变
      if(matched.length && matched[0].name!=="home"){
        matched = [{ path: '/home',name: 'home',meta:{title:'首页'}},...matched];
      }
      ...数组名 是一种追加数组的方法
      var arr = [1,2,3]
      var arr1 = [4,5]
      var arr2 = [2,...arr1] == [2,4,5]
      //
      this.lists = matched;
    }
  }
}
</script>

{
    path: '/list',
    name: 'list',
    meta:{title:'列表展示'},
    component: () => import('../views/list/index.vue'),
    children:[{      //二级路由
          //path:'testA',    
          path:'/list/testA',  
          name:'testA',
          meta:{title:'子列表A'},
          component: () => import('../views/list/part1.vue')
        },
        {
          path:'testB',   
          name:'testB',
          meta:{title:'子列表B'},
          component: () => import('../views/list/part2.vue')
    }]
  },