参考文章
方式1:监听路由
在没有更多路由配置的情况下,一级菜单单纯依靠监听路由实现多级面包屑
项目地址
主要代码
watch: {
$route(to) {
/**
* 检查是否为第一级导航
* 否:进行后续操作
* 是:重置面包屑
*/
if (
to.path !== "/daohang1" &&
to.path !== "/daohang2" &&
to.path !== "/daohang3"
) {
/**
* 检查面包屑集合中有无当前跳转的路由
* 有:删除后方面包屑
* 无:新增面包屑
*/
let index = this.breadList.findIndex((item) => {
return item.path == to.path;
});
if (index !== -1) {
this.breadList.splice(index + 1);
} else {
/**
* 禁止面包屑最后一层可点击
*/
let obj;
if (to.path == "/momentsshare" || to.path == "/myfavor") {
obj = {
label: to.name,
path: "",
};
} else {
obj = {
label: to.name,
path: to.path,
};
}
this.breadList = [...this.breadList, obj];
}
} else {
this.breadList = [
{
label: to.name,
path: to.path,
},
];
}
},
},
方式2:路由配置
待定
注意
记录过程中遇到的一些小问题
1、redirect要搭配<router-view />
一起使用