直接贴路由配置文件代码
{
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 路由变量 可以实时改变面包屑组件的数据,从而实现功能!亲测
最新更新:
在面包屑组件中可以不用watch,可以直接使用计算属性,循环计算属性
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-b