Vue嵌套路由

在 Vue Router 中，可以使用嵌套路由（Nested Routes）来表示子路由。通过嵌套路由，可以在父级路由下定义子路由，并将其组织成一个层次结构。

要表示子路由，首先需要在父级路由的配置中添加 children 字段，并在该字段中定义子路由。子路由是一个数组，每个元素代表一个子路由对象，其中包含路径、组件和其他选项。

以下是一个示例代码，展示如何使用 Vue Router 表示子路由：

import Vue from 'vue';
import Router from 'vue-router';

// 导入组件
import ParentComponent from '@/components/ParentComponent.vue';
import ChildComponent from '@/components/ChildComponent.vue';
import GrandchildComponent from '@/components/GrandchildComponent.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/parent',
      component: ParentComponent,
      children: [
        {
          path: 'child',
          component: ChildComponent,
          children: [
            {
              path: 'grandchild',
              component: GrandchildComponent
            }
          ]
        }
      ]
    }
  ]
});

在这个示例中，我们定义了三个组件：ParentComponent、ChildComponent 和 GrandchildComponent。

在路由配置中，我们定义了一个父级路由 /parent，它的组件是 ParentComponent。在父级路由的 children 字段中定义了一个子路由 /child，它的组件是 ChildComponent。再进一步，子路由 /child 还定义了一个子路由 /grandchild，它的组件是 GrandchildComponent。

这样就形成了一个层次结构的子路由，可以根据实际需求定义更多的父级和子路由。在使用 <router-view> 标签进行路由视图渲染时，Vue Router 会根据当前 URL 的匹配关系自动选择渲染哪个路由对应的组