elementui面包屑动态生成

tamplate模板中

    <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item,index) in list" :key="index" :to="{path:item.path}"> 
             {{item.name}} 
        </el-breadcrumb-item>
    </el-breadcrumb>

script标签中

export default {
    data() {
        return {
            list:[]
        }
    },
    watch:{
        $route(){
            this.bread();
        }
    },
    methods:{
        bread(){
        
            let matched = this.$route.matched.filter(item=>item.name);
            let first = matched[0];
            
            if(first&&first.name!=='首页'){    // 我在这里是判断的是name，渲染的是name，但是可以使用其他的字段
                matched = [{path:"/home",name:"首页"}].concat(matched);
            }
            
            this.list = matched;
        }
    },
    created(){
      this.bread();
    }
  };

路由中

const routes = [{
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home,
        name: '首页',
        meta:{
             title : "首页"   //  这里可以这样写，判断和渲染这个字段，看个人写法
        }
    },
    {
        path: '/login',
        component: Login,
        name: "登录页"
    },
    {
        path: '/shop',
        component: Shop,
        name: "商品管理"
    },
    {
        path: '/order',
        component: Order,
        name: "订单管理"
    }
];