Question

在我的网站上，我有一些导航，其中包含一些类别和嵌套导航锚点。如何在vue-router中对此路由进行分组？我提出的最好的方法是为每条路线放置一个元组，然后按照它进行分组。

Answer 1

您可以使用嵌套路线。在您的路线文件中，您可以执行类似的操作。

{
  path: '/category',
  name: 'category',
  component: Category,
  children: [
      {
         path: 'subcategory',
         name: 'subCategory',
         component: ChildComponent,
      },
      // other nested routes
  ]
},

Answer 2

我这样使用（看起来component: { render: h => h('router-view') }）：

      {
// =============================================================================
// MAIN LAYOUT ROUTES
// =============================================================================
        path: '',
        component: () => import('./layouts/main/Main.vue'),
        children: [
// =============================================================================
//    Routes
// =============================================================================
          {
            path: '/',
            name: 'home',
            component: () => import('./views/Dashboard.vue'),
          },
// =============================================================================
//    User Routes
// =============================================================================
          {
            path: '/user',
            name: 'user',
            component: { render: h => h('router-view') },
            children: [
              {
                path: 'list',
                name: 'user.list',
                component: () => import('./views/pages/User/List.vue'),
              },
            ]
          },

        ],
      }

Answer 3

有分叉的固定示例：https://jsfiddle.net/andrewright/wsmx92bg/

您应该知道，子路由器在父模板中打开。这意味着您需要在父模板中添加其他<router-view>。

想法是：子路由器更改某些块，例如父内容的一部分。使用它的好方法-用于子类别菜单。

如何在vue-router中分组路由

3 个答案: