使用 vue router 生成菜单标题的最佳方法是什么？

Question

我在 vue router 中定义了以下路由：

const routes = [
  {
    path: '/',
    name: 'home',
    params: { label: 'Home' },
    component: Home
  },
  {
    path: '/path1',
    name: 'path1',
    params: { label: 'Path 1' },
    children: [
      {
        path: 'subpath1',
        name: 'path1-sub1',
        params: { label: 'Sub 1' },
        component: sub1,
      },
      {
        path: 'subpath2',
        name: 'path1-sub2',
        params: { label: 'Sub 2' },
        component: sub2,
      },
      {
        path: 'subpath3',
        name: 'path1-sub3',
        params: { label: 'Sub 3' },
        component: sub3,
      }
    ]
  },
  {
    path: '/path2',
    name: 'path2',
    params: { label: 'Path 2' },
    children: [
      {
        path: 'subpath2',
        name: 'path2-sub1',
        params: { label: 'Sub 1' },
        component: sub1,
      },
      {
        path: 'subpath2',
        name: 'path2-sub2',
        params: { label: 'Sub 2' },
        component: sub2,
      },
      {
        path: 'subpath3',
        name: 'path2-sub3',
        params: { label: 'Sub 3' },
        component: sub3,
      }
    ]
  },
  {
    path: '/path3',
    name: 'path3',
    params: { label: 'Path 3' },
    children: [
      {
        path: 'subpath3',
        name: 'path3-sub1',
        params: { label: 'Sub 1' },
        component: sub1,
      },
      {
        path: 'subpath2',
        name: 'path3-sub2',
        params: { label: 'Sub 2' },
        component: sub2,
      },
      {
        path: 'subpath3',
        name: 'path3-sub3',
        params: { label: 'Sub 3' },
        component: sub3,
      }
    ]
  },
]

我正在尝试创建一个

v-for

循环来为我的应用程序生成导航菜单，但我想在

path2

和

path3

之间添加一个标题，并且有一些方法可以在将来快速添加标题。有什么方法可以添加一个虚拟项目作为路线，或者 vue 路由器是否已经使用某些东西在菜单中生成标题？

Answer 1

我不确定我是否正确理解了您的意思。但根据我收集的信息，我可能会做这样的事情：

// I added an title "object"
const routes = [
  {
    path: '/',
    name: 'home',
    params: { label: 'Home' },
    component: Home
  },
  {
    path: '/path1',
    name: 'path1',
    params: { label: 'Path 1' },
    children: [
      {
        path: 'subpath1',
        name: 'path1-sub1',
        params: { label: 'Sub 1' },
        component: sub1,
      },
      {
        path: 'subpath2',
        name: 'path1-sub2',
        params: { label: 'Sub 2' },
        component: sub2,
      },
      {
        path: 'subpath3',
        name: 'path1-sub3',
        params: { label: 'Sub 3' },
        component: sub3,
      }
    ]
  },
  {
    path: '/path2',
    name: 'path2',
    params: { label: 'Path 2' },
    children: [
      {
        path: 'subpath2',
        name: 'path2-sub1',
        params: { label: 'Sub 1' },
        component: sub1,
      },
      {
        path: 'subpath2',
        name: 'path2-sub2',
        params: { label: 'Sub 2' },
        component: sub2,
      },
      {
        path: 'subpath3',
        name: 'path2-sub3',
        params: { label: 'Sub 3' },
        component: sub3,
      }
    ]
  },
  {
     title: "I am some title",
     as: "h4"
  },
  {
    path: '/path3',
    name: 'path3',
    params: { label: 'Path 3' },
    children: [
      {
        path: 'subpath3',
        name: 'path3-sub1',
        params: { label: 'Sub 1' },
        component: sub1,
      },
      {
        path: 'subpath2',
        name: 'path3-sub2',
        params: { label: 'Sub 2' },
        component: sub2,
      },
      {
        path: 'subpath3',
        name: 'path3-sub3',
        params: { label: 'Sub 3' },
        component: sub3,
      }
    ]
  },
];

然后将该对象用于您的 UI 和 vue-router：

const getRoutes = () => routes.filter(route => !route.title)

如果这不是您要找的内容，请澄清。