vue 項目動態iview面包屑

效果圖：

 

 

vue-router：

 

 

 

 關鍵代碼：

{ // 勞務管理-工卡管理
            path: '/job_card_admin',
            name: 'JobCardAdmin',
            component: JobCardAdmin,
            meta: {
                menu: [{ // 自定義數據格式
                    father: "/labour_services_admin",
                    path: '/job_card_admin',
                    name: '勞務管理',
                },{
                    path: '/job_card_admin',
                    name: '工卡管理',
                }]
              }
        }

　　

 在頁面中調用：

this.$route.meta.menu就是menu的數據了

監聽路由的變化和頁面刷新或第一次進來時：

 

 watch:{
        $route(){   // 監聽路由變化
            this.list = []
            this.list = this.$route.meta.menu
        }
    },

　

created() {
     this.list = this.$route.meta.menu;
   },

　　

　最后寫入組件

<Breadcrumb class="pointer">
   <BreadcrumbItem v-for="(item,index) in list" :key="index" :to="item.path">{{item.name}}</BreadcrumbItem>
/Breadcrumb>

　　

參考：https://www.cnblogs.com/freedom-feng/p/11592873.html