- 问题描述：
用户在进入一个模块后，侧边栏对应的菜单项正确高亮显示。然而，当用户在模块内刷新页面时，虽然路由仍保持在当前页面，但侧边栏的高亮状态却丢失了。
- 原因分析
问题源于嵌套路由结构与侧边栏高亮逻辑之间的不兼容：
- 路由结构特点：该模块为父子嵌套路由，父路由为
RouteNames.DIGITAL_HUMAN，包含多个子路由如list、edit和operate。 - 侧边栏组件基于当前路由名称 (
$route.name) 进行高亮判断，而在嵌套路由中，当前路由名称是子路由的名称（如RouteNames.HUMAN_LIST），与侧边栏菜单项的routeName(RouteNames.DIGITAL_HUMAN) 不匹配。 - 状态持久化缺失：页面刷新时，Vue 实例重新初始化，但未能正确恢复子路由对应的父级菜单项高亮状态。
解决方案
基于 Vue Router 的 meta 字段扩展，引入一种显式的映射机制，具体如下：
-
添加
activeMenu元信息：在路由配置中，为所有相关子路由添加meta.activeMenu属性，指向使其高亮的父级菜单项标识符。这种方式明确了子路由与父级导航项的对应关系。{ 2 path: 'digitalhuman', 3 name: RouteNames.DIGITAL_HUMAN, 4 // ...其他配置... 5 meta: { 6 // ...其他元数据... 7 activeMenu: RouteNames.DIGITAL_HUMAN 8 }, 9 children: [ 10 { 11 path: 'list', 12 name: RouteNames.DIGITAL_HUMAN_LIST, 13 // ...其他配置... 14 meta: { 15 // ...其他元数据... 16 activeMenu: RouteNames.DIGITAL_HUMAN 17 } 18 }, 19 // 其他子路由同理配置 20 ] 21}
-
优化高亮逻辑：修改激活菜单的逻辑，优先使用路由元数据中的
activeMenu指示，而非直接依赖路由名称。 -
增强路由监听：在 Vue 组件中添加对路由变化的监听，确保在路由状态变更或页面刷新时都能正确计算激活菜单。
watch: {
'$route': {
handler(to) {
this.activeMenu = this.getActiveMenu(to)
},
immediate: true
}
}
