1. 路由对象层级和组件路由出口是层级对应关系

路由参数routes配置的children层级关系 和 <router-view /> 出口是相互对应的，即
第一层级的路由出口在组件根组件中使用
第二层级的路由出口在第一层级组件中使用
第三层级的路由出口在第二层级组件根组件使用
以此类推

2. 示例

此为三层路由，其中 path为 '/' ，代表默认访问页面
第一层初始化路由是：group1
第二层初始化路由是：group2
第三层初始化路由是：group3

export default new Router({
  routes: [
    {
      path: '/',
      name: 'group1',
      component: group1,
      children: [{
        path: '/',
        name: 'group2',
        component: () => import('@/views/group2/index'),
        children: [{
          path: '/',
          name: 'group3',
          component: () => import('@/views/group2/group3/index'),
        }]
      }]
    }
  ]
})

• 第一层路由出口 @/App.vue，此层路由的切换是针对整个页面的，适合登录、注册、首页等

<template>
 <router-view />
</template>
<style lang="less" scoped>
</style>

• 第二层路由出口需要放在第一层路由的任何一个页面，比如： @/views/group1

<template>
  <div class="main">
    <div>我是第一层路由</div>
    <router-view />
  </div>
</template>

<script>
export default {};
</script>
<style lang="less" scoped>
.main {
  background: burlywood;
  height: 100vh;
}
</style>

• 第三层路由出口需要放在第二层路由的任何一个页面 @/views/group2/index

<template>
  <div class="main">
    <div>我是第二层路由</div>
   <router-view />
  </div>
</template>

<script>
export default {};
</script>
<style lang="less" scoped>
.main {
  background:cadetblue;
  height: 80vh;
  width: 80%;
}
</style>

• 最小的子路由只负责显示，无出口

<template>
  <div class="main">
    <div>我是第三层路由</div>
  </div>
</template>

<script>
export default {};
</script>
<style lang="less" scoped>
.main {
  background:cornflowerblue;
  height: 60vh;
  width: 60%;
}
</style>