如何在 vue-router 中对路由进行分组答案

【问题标题】：How to group routes in vue-router如何在 vue-router 中对路由进行分组
【发布时间】：2018-01-09 14:45:11
【问题描述】：

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

【问题讨论】：

可以使用嵌套路由router.vuejs.org/en/essentials/nested-routes.html

【解决方案1】：

我是这样用的（看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'),
              },
            ]
          },

        ],
      }

【讨论】：

非常感谢 - 这太棒了，正是我想要的，应该被标记为已接受的答案。您介意更深入地解释一下component: { render: h => h('router-view') } 的情况吗？我添加了 vue 文档和链接的摘录，但我仍然对究竟发生了什么有点模糊。再次感谢！
@KevinFoster 它将渲染并且孩子们将在那里渲染。
嘿@Pablo Papalardo ！感谢您的回复-我看到我的带有引用的编辑被删除或不被接受，所以这可能无关紧要-我更多的是寻找更多关于render: h => h(...) 工作原理和方式的解释，因为尽管插入router-view 是直观且非常有意义，调用的结构以及为什么会起作用有点模糊，并且文档很少。谢谢！
如果有人在寻找 vue 3，h 不再被传递给 render 函数，但它应该从 vue 命名空间 import { h } from 'vue' render: () => h('router-view') v3.vuejs.org/guide/migration/… 导入

【解决方案2】：

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

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

【讨论】：

这不是用来分组路由的。而不是嵌套组件。这些是不同的东西
@sanders 怎么样？你的解决方案是什么？

【解决方案3】：

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

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

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

【讨论】：