嵌套路由实现侧边栏导航联动教程

本文深入解析了中后台系统中嵌套路由如何实现侧边栏与顶部导航的智能联动，摒弃传统手动维护激活状态的繁琐做法，转而依托路由元信息（meta）精准标记菜单归属与层级，并通过 `useRoute` 和响应式 `computed` 实时推导激活项——侧边栏自动识别所属模块并展开对应菜单组，顶部导航则按 `topGroup` 聚合去重、动态显示且精准高亮当前标签，真正实现“路由即状态”的简洁架构，让导航逻辑随路由结构天然同步，零冗余、零同步风险，大幅提升开发效率与系统可维护性。

侧边栏和顶部导航联动的关键，在于让两者都基于当前路由的层级关系动态激活，而不是各自维护一套独立的状态。核心思路是：用路由元信息（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 响应式变化自动重算，零手动同步

理论要掌握，实操不能落！以上关于《嵌套路由实现侧边栏导航联动教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！