如何在vue-router中分组路由？含分类与嵌套导航场景需求

嘿，这个场景我在做电商类项目的时候刚好碰到过，你想到用meta字段分组真的是个非常靠谱的思路！我来给你拆解下具体怎么落地，还有几个实用的小技巧能让你的导航更丝滑～

1. 给路由添加分组相关的meta字段 #

首先在路由配置里，给每个需要归类的路由（包括嵌套的锚点路由）添加meta.group标记主分类，还可以用meta.subGroup区分嵌套层级，甚至加meta.anchor标记锚点类型，让分组逻辑更清晰：

const routes = [
  {
    path: '/products',
    name: 'Products',
    component: ProductsLayout,
    meta: { group: 'products', label: '产品中心' },
    children: [
      {
        path: 'electronics',
        name: 'Electronics',
        component: ElectronicsPage,
        meta: { group: 'products', subGroup: 'electronics', label: '数码产品' },
        children: [
          {
            path: '#smartphones',
            name: 'SmartphonesAnchor',
            component: SmartphonesSection,
            meta: { group: 'products', subGroup: 'electronics', anchor: 'smartphones', label: '智能手机' }
          },
          {
            path: '#laptops',
            name: 'LaptopsAnchor',
            component: LaptopsSection,
            meta: { group: 'products', subGroup: 'electronics', anchor: 'laptops', label: '笔记本电脑' }
          }
        ]
      },
      {
        path: 'clothing',
        name: 'Clothing',
        component: ClothingPage,
        meta: { group: 'products', subGroup: 'clothing', label: '服饰专区' }
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: AboutPage,
    meta: { group: 'about', label: '关于我们' }
  }
];

2. 封装工具函数筛选分组路由 #

写一个简单的递归工具函数，用来根据group值快速筛选出对应分类下的所有路由（包括嵌套子路由），这样在导航组件里就能直接复用：

// utils/routerHelpers.js
export function getRoutesByGroup(routes, targetGroup) {
  const matchedRoutes = [];

  function traverseRouteTree(routeList) {
    routeList.forEach(route => {
      if (route.meta?.group === targetGroup) {
        matchedRoutes.push(route);
      }
      // 递归处理嵌套的子路由
      if (route.children?.length) {
        traverseRouteTree(route.children);
      }
    });
  }

  traverseRouteTree(routes);
  return matchedRoutes;
}

3. 在导航组件中渲染分组路由 #

在你的导航组件里，调用工具函数获取对应分组的路由，就能轻松渲染出带嵌套锚点的分类导航了：

<!-- Navigation.vue -->
<template>
  <nav class="site-nav">
    <div v-for="group in navGroups" :key="group.name" class="nav-group">
      <h3 class="group-title">{{ group.label }}</h3>
      <ul class="group-menu">
        <li v-for="route in getRoutesByGroup($router.options.routes, group.name)" :key="route.name" class="menu-item">
          <router-link 
            :to="{ path: route.path }"
            class="menu-link"
            :class="{ active: $route.path.includes(route.path) }"
          >
            {{ route.meta.label || route.name }}
          </router-link>
          <!-- 渲染嵌套的锚点导航 -->
          <ul v-if="route.children?.length" class="sub-menu">
            <li v-for="childRoute in route.children" :key="childRoute.name" class="sub-menu-item">
              <router-link 
                :to="{ path: `${route.path}${childRoute.path}` }"
                class="sub-menu-link"
                :class="{ active: $route.hash === childRoute.path }"
              >
                {{ childRoute.meta.label || childRoute.name }}
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script setup>
import { getRoutesByGroup } from '@/utils/routerHelpers';

// 定义需要展示的导航分组
const navGroups = [
  { name: 'products', label: '产品中心' },
  { name: 'about', label: '关于我们' }
];
</script>

额外优化：锚点路由的滚动行为 #

因为涉及到锚点跳转，记得在Vue Router里配置滚动行为，让锚点定位更流畅：

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 处理锚点跳转的平滑滚动
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'
      };
    }
    // 其他情况回到顶部或保存的位置
    return savedPosition || { top: 0 };
  }
});

为什么meta分组是最优方案？ #

• 灵活性拉满：可以根据需求自定义任意meta字段（比如分组、子分组、锚点标记、导航图标等），适配各种复杂导航结构
• 侵入性极低：不需要修改路由的核心结构，只是附加元数据，完全不影响路由的正常跳转逻辑
• 维护成本低：所有分组规则集中在路由配置里，后续调整分类只需要修改meta字段，不用动业务代码

如果你的路由结构特别复杂，也可以考虑把分组配置单独抽成一个JSON文件，再和路由做关联，但meta字段的方式已经足够应对90%以上的场景啦～

内容的提问来源于stack exchange，提问作者bashkovpd