侧边栏和顶部导航联动的关键在于基于路由层级动态激活：通过meta标记菜单归属，用useRoute和computed实时推导激活项，嵌套路由结构天然反映页面层级。
侧边栏和顶部导航联动的关键，在于让两者都基于当前路由的层级关系动态激活，而不是各自维护一套独立的状态。核心思路是：用路由元信息（meta）标记菜单归属、用 useRoute 和 computed 实时推导激活项、通过嵌套路由结构天然反映页面层级。
一、路由配置：用 meta 明确菜单归属与层级
在路由定义中，为每个子路由设置 meta 字段，标明它属于哪个侧边栏菜单（sideMenu）和哪个顶部标签页组（topGroup），同时支持隐藏、权限、图标等扩展：
{
path: '/user',
component: Layout,
meta: { title: '用户管理', icon: 'UserOutlined' },
children: [
{
path: 'list',
name: 'UserList',
component: () => import('@/views/user/List.vue'),
meta: {
title: '用户列表',
sideMenu: 'user', // 归属侧边栏「用户管理」模块
topGroup: 'user' // 归属顶部「用户」标签页组
}
},
{
path: 'detail/:id',
name: 'UserDetail',
component: () => import('@/views/user/Detail.vue'),
meta: {
title: '用户详情',
sideMenu: 'user',
topGroup: 'user',
hiddenInTop: true // 详情页不显示在顶部导航（仅侧边栏可进）
}
}
]
}
二、侧边栏：根据当前路由匹配 activeKey
侧边栏不监听点击切换路由，而是被动响应——读取当前路由的 matched 数组，向上查找第一个带 sideMenu 的路由记录，作为激活项：
- 遍历
route.matched（从最内层到根），找到首个含meta.sideMenu的路由 - 该值即为侧边栏的
activeKey，用于高亮对应菜单组 - 菜单组展开逻辑也由此触发：若当前路由属于某组，则默认展开该组
三、顶部导航：按 topGroup 聚合并标记当前项
顶部导航本质是「标签页式导航」，需解决两个问题：显示哪些标签、哪个是当前激活态：
- 从
route.matched中筛选出所有含meta.topGroup且未设hiddenInTop的路由 - 去重合并相同
topGroup下的多个路由（如 list/detail 都属于 user 组，只显示一个「用户」标签） - 当前激活项 = 当前路由自身（或其最近的、有
topGroup的父级）的meta.title
四、联动细节：避免手动同步状态
不要用 ref 或 pinia 单独存「当前侧边栏选中项」或「顶部当前标签」——这会引入冗余状态和同步风险。正确做法是：
- 侧边栏组件内直接
computed(() => getSideMenuKey(route)) - 顶部导航组件内直接
computed(() => getTopTabs(route)) - 所有菜单点击都调用
router.push()，让 Vue Router 自动更新route对象 - 组件随
route响应式变化自动重算，零手动同步
