Vue 对嵌套路由的理解

之前使用嵌套路由的时候发现搞不清楚为什么没有正确显示，查阅文档后，根据自己的理解把实验过程记录一下

<div id="app">
  <p>
    <router-link to="/a">a</router-link>
    **
    <router-link to="/a/b">b</router-link>
    **
    <router-link to="/a/b/c">c</router-link>
  </p>
  <router-view></router-view>
</div>

/* CSS */
#app>p{
    border:5px solid red;
}
.a{
    border:5px solid green;
}
.b{
    border:5px solid yellow;
}
.c{
    border:5px solid blue;
}

// JavaScript
const User = {
  template: `
    <div class="user">
      <h2>显示区</h2>
      <router-view></router-view>
    </div>
  `
}
 
const a = { template: '<div class="a"><p>a路由</p><router-view></router-view></div>' }
const b = { template: '<div class="b"><p>b路由</p><router-view></router-view></div>' }
const c = { template: '<div class="c"><p>c路由</p><router-view></router-view></div>' }
 
const router = new VueRouter({
  routes: [
    { path: '/', component: User,
      children: [
        {   name:'a',
            path: 'a', 
            component: a,
            children:[
              {   name:'b',
                  path: 'b', 
                component: b,
                children:[
                 { 
                    name: 'c',
                    path: 'c',
                    component: c }   
                ]
                 },  
            ]
         },     
      ]
    }
  ]
})
 
const app = new Vue({ router }).$mount('#app')