背景:面包屑根据菜单内容显示不同内容。首页永远存在,后面的活动管理及多级菜单的面包屑展示。
实现原理:
通过this.$route.matched获取所有匹配路由,将处理首页外的其他路由设置到一个数组中,再通过数组循环方式显示
通过路由中的meta属性设置title用于显示面包屑;
监听路由,获取路由栈this.$route.matched
html
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="(item,index) of levelList" :key="index">
{{item.meta.title}}
</el-breadcrumb-item>
</el-breadcrumb>
javascript
created() {
this.getBreadcrumb();
},
watch: {
$route(route) {
if (route.path.startsWith("/redirect/")) {
return;
}
this.getBreadcrumb();
}
},
methods: {
getBreadcrumb() {
let matched = this.$route.matched.filter(
item => item.meta && item.meta.title
);
const first = matched[0];
// 判断不是首页才concat
if (!this.isDashboard(first)) {
matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
}
this.levelList = matched.filter(
item => item.meta && item.meta.title && item.meta.breadcrumb !== false
);
},
isDashboard(route) {
const name = route && route.meta.title;
if (!name) {
return false;
}
return name.trim().toLocaleLowerCase() === "首页".toLocaleLowerCase();
},
}