feat(sidebar): 增加子路由回退高亮父菜单功能
- 添加 menuPaths 集合收录全站菜单路径 - 在 activeMenu 中判断子路由路径是否存在于菜单路径集合 - 对不在集合中的子路由,匹配最长前缀父菜单路径进行高亮回退 - 实现子路由(如 /vehicle/customer-archive/form)对父菜单自动高亮回退功能 - 提升侧边栏菜单选中状态的准确性和用户体验
This commit is contained in:
@@ -44,6 +44,19 @@ export default {
|
||||
collect(this.menu);
|
||||
return indexes;
|
||||
},
|
||||
// 全站菜单路径集合,用于子路由(如 /vehicle/customer-archive/form)回退高亮父菜单
|
||||
menuPaths() {
|
||||
const props = website.menu;
|
||||
const set = new Set();
|
||||
const collect = list => {
|
||||
(list || []).forEach(item => {
|
||||
if (item[props.path]) set.add(item[props.path]);
|
||||
collect(item[props.children]);
|
||||
});
|
||||
};
|
||||
collect(this.menu);
|
||||
return set;
|
||||
},
|
||||
activeMenu() {
|
||||
const route = this.$route;
|
||||
const { meta, path } = route;
|
||||
@@ -55,6 +68,15 @@ export default {
|
||||
if (fullPath !== path && this.menuIndexes.has(fullPath)) {
|
||||
return fullPath;
|
||||
}
|
||||
// 子路由(如 /vehicle/customer-archive/form)自动回退高亮最长前缀匹配的父菜单
|
||||
if (!this.menuPaths.has(path)) {
|
||||
const matched = [...this.menuPaths]
|
||||
.filter(p => path.startsWith(p + '/'))
|
||||
.sort((a, b) => b.length - a.length);
|
||||
if (matched.length) {
|
||||
return matched[0];
|
||||
}
|
||||
}
|
||||
return path;
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user