首先App.vue有一个最顶层的router-view

//App.vue
<template>
  <keep-alive>
    <router-view/>
  </keep-alive>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

router/index.js文件配置的意思是，当浏览器路径为/，App.vue里的router-view显示HelloWorld组件

//router/index.js
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

子路由，child.vue有一个子路由router-view，再创建两个组件a.vue和b.vue

//child.vue
<template>
  <div class="child">
    <router-link to="/a"></router-link>
    <router-link to="/b"></router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'child'
}
</script>

<style>
</style>

router/index.js文件配置的意思是，
当浏览器路径为/a，child.vue里的子路由router-view显示a组件
当浏览器路径为/b，child.vue里的子路由router-view显示b组件
默认显示a组件

//router/index.js
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    },
    {
      path: '/a',//路径配置和第一个children一样，表示子路由默认显示a.vue
      name: 'a',
      component: child,
      //path: '/child',
      //redirect:'/a',//或者也可以重定向到/a
      children:[
        {
          path:'/a',
          name: 'a',
          component: a
        },
        {
          path:'/b',
          name: 'b',
          component: b
        }
      ]
    },
  ]
})

同级多个子路由，child2.vue有3个子路由router-view，再创建三个组件child_a.vue，child_b.vue，child_c.vue

//child2.vue
<template>
  <div class="child2">
    <router-link to="/child_a"></router-link>
    <router-link to="/child_b"></router-link>
    <router-view/>
    <router-view/ name="b">
    <router-view/ name="c">
  </div>
</template>

<script>
export default {
  name: 'child2'
}
</script>

<style>
</style>

router/index.js文件配置的意思是，
当路径为/child_a时，默认router-view显示child_a，name为b的router-view显示child_b，name为c的router-view显示child_c
当路径为/child_b时，默认router-view显示child_c，name为b的router-view显示child_b，name为c的router-view显示child_a
默认路径为/child_a

//router/index.js
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    },
    {
      path: '/a',
      name: 'a',
      ...//同上，省略
    },
    {
      path: '/child_a',    //路径配置和第一个children一样，表示默认路径为/child_a
      name: 'child_a',
      component: child2,
      //path: '/child2',
  	  //redirect:'/child_a',   //或者也可以重定向到/child_a
      children:[    //此处要配置在children里也是因为3个路由都为child2里的子路由
        {
          path: '/child_a',    //当路径为/child_a时
          components: {    //这里注意是components，加s
            default: child_a,    //默认router-view显示child_a
            b: child_b,	   //name为b的router-view显示child_b
            c: child_c	   //name为c的router-view显示child_c
          }
        },
        {
          path: '/child_b',//当路径为/child_b时
          components: {
            default: child_c,	//默认router-view显示child_c
            b: child_b,    //name为b的router-view显示child_b
            c: child_a     //name为c的router-view显示child_a
          }
        }
      ]
    },
  ]
})