嵌套路由如何实现侧边栏与顶部导航联动？中后台项目架构实战操作步骤

嵌套路由如何实现侧边栏与顶部导航联动？中后台项目架构实战操作步骤并不只看表面做法，关键还要理解相关条件、限制和后续影响。

侧边栏和顶部导航联动的关键在于基于路由层级动态激活：通过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 的路由记录，作为激活项：

1. 遍历 route.matched（从最内层到根），找到首个含 meta.sideMenu 的路由
2. 该值即为侧边栏的 activeKey，用于高亮对应菜单组
3. 菜单组展开逻辑也由此触发：若当前路由属于某组，则默认展开该组

三、顶部导航：按 topGroup 聚合并标记当前项

顶部导航本质是「标签页式导航」，需解决两个问题：显示哪些标签、哪个是当前激活态：

1. 从 route.matched 中筛选出所有含 meta.topGroup 且未设 hiddenInTop 的路由
2. 去重合并相同 topGroup 下的多个路由（如 list/detail 都属于 user 组，只显示一个「用户」标签）
3. 当前激活项 = 当前路由自身（或其最近的、有 topGroup 的父级）的 meta.title

四、联动细节：避免手动同步状态

不要用 ref 或 pinia 单独存「当前侧边栏选中项」或「顶部当前标签」——这会引入冗余状态和同步风险。正确做法是：

1. 侧边栏组件内直接 computed(() => getSideMenuKey(route))
2. 顶部导航组件内直接 computed(() => getTopTabs(route))
3. 所有菜单点击都调用 router.push()，让 Vue Router 自动更新 route 对象
4. 组件随 route 响应式变化自动重算，零手动同步