对应关系

用 Vue-Cli 编写的项目，src 文件夹根目录下的 App.vue 文件中，有如下的 HTML 代码：

  <div id="app">
    <router-view/>
  </div>

在 src\router\index.js 中，有如下的路由配置：

const routes = [
  {
    path: '/aaa',
    name: 'BasicLayout1',
    component: BasicLayout1,
  },
  {
    path: '/bbb',
    name: 'BasicLayout2',
    component: BasicLayout2,
  }
]

App.vue 中的 router-view，对应着路由配置 src\router\index.js 中 routes 数组中的一级元素。

也就是访问 /aaa 或 /bbb 时，会分别加载 BasicLayout1 和 BasicLayout2 组件。

而当 BasicLayout1.vue 中又有如下的 HTML 代码：

  <div id="basic-layout1">
    <router-view/>
  </div>

路由配置中又有如下内容时：

    ...
    path: '/aaa',
    name: 'BasicLayout1',
    component: BasicLayout1,
    redirect: '/game1',
    children: [
      {
        path: 'game1',
        name: 'Game1',
        component: () => import('@/views/Game1/Main.vue'),
      },
    ],

访问 /aaa/game1 的话，则会加载 Game1 组件。

因为 BasicLayout1.vue 中的 router-view 对应着路由配置表中 children 数组内的子组件。所以当访问 /aaa 下的嵌套路由 game1 时，对应的组件 Game1 就会被渲染到 BasicLayout1.vue 的 router-view 中。

此外也要注意，在配置嵌套路由时，只有最顶级的路由需要以 / 开头，就像上面的 /aaa 和 /bbb 那样。各个子级的嵌套路由都不需要以 / 开头。这一条是可选执行的，在实际开发中，遵照这个建议还是会让开发更方便一些的。

官方文档：嵌套路由 | Vue Router。