侧边栏和顶部导航联动的关键在于基于路由层级动态激活：通过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 响应式变化自动重算，零手动同步