使用$route制作面包屑
1. 在router中加上meta属性
{
path: '/thematicDiscussion' ,
name: 'thematicDiscussion' ,
redirect: '/thematicDiscussion/home' ,
component: layout,
meta: { title: '专题讨论' , icon: 'el-icon-location' } ,
children: [
{
path: 'home' ,
name: 'thematicHome' ,
meta: { title: '首页' } ,
component: thematicList,
} ,
2. 在watch中监测$route
watch: {
$route ( route) {
if ( route. path. startsWith ( '/redirect/' ) ) {
return
}
this . getBreadcrumb ( )
}
} ,
created ( ) {
this . getBreadcrumb ( )
} ,
3.用this.$route.matched获取当前的route信息, 最后获取到this.levelList就能做面包屑了
getBreadcrumb ( ) {
let matched = this . $route. matched. filter ( item => item. meta && item. meta. title)
const first = matched[ 0 ]
console. log ( 'matched[0]' , this . $route. matched) ;
this . levelList = matched. filter ( item => item. meta && item. meta. title && item. meta. breadcrumb !== false )
} ,