如何用Vue Router生成菜单标题？并支持快速添加分隔标题

Vue Router本身没有专门的菜单标题生成方案，但可以通过虚拟路由项或路由分组的方式轻松实现你的需求，两种方法都能支持快速添加新标题。

方案一：添加虚拟路由项（最贴合你的需求） #

直接在路由数组中插入仅用于菜单渲染的虚拟项，这类项不会被Vue Router解析为实际路由（因为没有path属性），完全服务于导航结构。

步骤1：修改路由配置 #

将原路由中的params.label移到更规范的meta字段，并插入虚拟标题项：

const routes = [
  {
    path: '/',
    name: 'home',
    meta: { label: 'Home' }, // 用meta存菜单文本更合理
    component: Home
  },
  {
    path: '/path1',
    name: 'path1',
    meta: { label: 'Path 1' },
    children: [
      { path: 'subpath1', name: 'path1-sub1', meta: { label: 'Sub 1' }, component: sub1 },
      { path: 'subpath2', name: 'path1-sub2', meta: { label: 'Sub 2' }, component: sub2 },
      { path: 'subpath3', name: 'path1-sub3', meta: { label: 'Sub 3' }, component: sub3 }
    ]
  },
  {
    path: '/path2',
    name: 'path2',
    meta: { label: 'Path 2' },
    children: [
      { path: 'subpath1', name: 'path2-sub1', meta: { label: 'Sub 1' }, component: sub1 },
      { path: 'subpath2', name: 'path2-sub2', meta: { label: 'Sub 2' }, component: sub2 },
      { path: 'subpath3', name: 'path2-sub3', meta: { label: 'Sub 3' }, component: sub3 }
    ]
  },
  // 虚拟标题项：仅用于渲染菜单标题
  {
    type: 'title',
    meta: { label: '高级功能菜单' }
  },
  {
    path: '/path3',
    name: 'path3',
    meta: { label: 'Path 3' },
    children: [
      { path: 'subpath1', name: 'path3-sub1', meta: { label: 'Sub 1' }, component: sub1 },
      { path: 'subpath2', name: 'path3-sub2', meta: { label: 'Sub 2' }, component: sub2 },
      { path: 'subpath3', name: 'path3-sub3', meta: { label: 'Sub 3' }, component: sub3 }
    ]
  }
]

步骤2：在模板中渲染菜单 #

通过v-for循环时判断路由类型，分别渲染标题和菜单项：

<template>
  <nav class="app-nav">
    <div v-for="(item, idx) in routes" :key="idx">
      <!-- 渲染菜单标题 -->
      <h3 v-if="item.type === 'title'" class="nav-title">
        {{ item.meta.label }}
      </h3>
      <!-- 渲染一级菜单项 -->
      <div v-else class="nav-item">
        <router-link :to="{ name: item.name }">
          {{ item.meta.label }}
        </router-link>
        <!-- 渲染子菜单（如果有） -->
        <div v-if="item.children" class="sub-nav">
          <router-link 
            v-for="child in item.children" 
            :key="child.name" 
            :to="{ name: child.name }"
            class="sub-nav-item"
          >
            {{ child.meta.label }}
          </router-link>
        </div>
      </div>
    </div>
  </nav>
</template>

未来要添加新标题时，只需在路由数组对应位置插入相同格式的type: 'title'项即可，无需修改渲染逻辑。

方案二：路由分组（适合多组菜单场景） #

如果你的菜单需要更清晰的分组管理，可以提前将路由按标题分组，再循环渲染每组的标题和路由。

步骤1：定义路由分组 #

const menuGroups = [
  {
    title: '基础导航',
    routes: [routes[0], routes[1], routes[2]]
  },
  {
    title: '高级功能菜单',
    routes: [routes[3]]
  }
]

步骤2：模板渲染分组菜单 #

<template>
  <nav class="app-nav">
    <div v-for="group in menuGroups" :key="group.title">
      <h3 class="nav-title">{{ group.title }}</h3>
      <div v-for="route in group.routes" :key="route.name" class="nav-item">
        <router-link :to="{ name: route.name }">
          {{ route.meta.label }}
        </router-link>
        <!-- 子菜单渲染逻辑同上 -->
      </div>
    </div>
  </nav>
</template>

这种方法适合路由数量较多、分组逻辑明确的场景，维护起来更清晰。

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