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')
? ? }]
? },