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