直接貼路由配置文件代碼
{
path: '/Trafficaccidentddetail',
name: 'Trafficaccidentddetail',
meta: {
title: '交通事故詳情',
breadcrumb:[
{
name:'事件管理',
path:'/Trafficaccident'
},
{
name:'交通事故',
path:'/Trafficaccident'
},
{
name:'詳情',
path:'/Trafficaccidentddetail'
}
]
},
component: resolve => require(['../components/page/Trafficaccidentddetail.vue'], resolve) //交通事故詳情
},
說明：在這里我們 router 的 meta屬性 添加了 自定義的breadcrumb對象蜂厅，這樣做后稽鞭，在每個需要展示面包屑的組件頁面中都可以通過：
<el-breadcrumb separator="/">
<el-breadcrumb-item>當前位置:</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: item.path }" v-for="item in this.$router.history.current.meta.breadcrumb">{{item.name}}</el-breadcrumb-item>
</el-breadcrumb>
這樣訪問即可：拿馈（以上方式是需要將面包屑嵌入每一個文件中徙融，如果需要只使用一個面包屑組件全局使用請看下面）
methods:{
fetchDate(data){
console.log('data',data);
this.routerData = data.meta ? data.meta : '';
}
},
watch:{
"$route": "fetchDate"
},
mounted(){
this.routerData = this.$route.meta.breadcrumb ? this.$route.meta.breadcrumb : '';
}
我們在面包屑組件中watch $route 路由變量 可以實時改變面包屑組件的數(shù)據(jù)捕犬，從而實現(xiàn)功能舍扰！親測
最新更新：
在面包屑組件中可以不用watch,可以直接使用計算屬性，循環(huán)計算屬性
computed:{
breadcrumb(){
return this.$route.meta.breadcrumb;
}
},
<el-breadcrumb separator="/">
<el-breadcrumb-item>當前位置:</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: item.path }" v-for="item in breadcrumb">{{item.name}}</el-breadcrumb-item>
</el-breadcrumb>
