vue之嵌套路由

关键词：路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件

<div id="app">
  <p>
    <router-link to="/author/">贾岛</router-link>
  </p>
  <p>
    <router-link to="/author/title">忆江上吴处士</router-link>
  </p>
  <p>  
    <router-link to="/author/title/first">一</router-link>
    <router-link to="/author/title/secnd">二</router-link>
    <router-link to="/author/title/third">三</router-link>
    <router-link to="/author/title/forth">四</router-link>
  </p>
  <p>
    <router-link to="/author2/">张九龄</router-link>
  </p>
  <p>
    <router-link to="/author2/title">感遇</router-link>
  </p>
  <p>  
    <router-link to="/author2/title/first">一</router-link>
    <router-link to="/author2/title/secnd">二</router-link>
    <router-link to="/author2/title/third">三</router-link>
    <router-link to="/author2/title/forth">四</router-link>
  </p>
  <div>
    <router-view></router-view>  
  </div>
</div>

const Author = {
  template: `
    <div class="author">
      <h4>忆江上吴处士</h4>
      <router-view></router-view>
    </div>
  `
};
const Author2 = {
  template: `
    <div class="author2">
      <h4>感遇</h4>
      <router-view></router-view>
    </div>
  `
};
   const AutFirst = { template: '<div>闽国扬帆去，蟾蜍亏复圆。</div>' };
   const AutSecnd = { template: '<div>秋风吹渭水，落叶满长安。</div>' };
   const AutThird = { template: '<div>此地聚会夕，当时雷雨寒。</div>' };
   const AutForth = { template: '<div>兰桡殊未返，消息海云端。</div>' };

   const AutFirst2 = { template: '<div>兰叶春葳蕤，桂华秋皎洁。</div>' };
   const AutSecnd2 = { template: '<div>欣欣此生意，自尔为佳节。</div>' };
   const AutThird2 = { template: '<div>谁知林栖者，闻风坐相悦。</div>' };
   const AutForth2 = { template: '<div>草木有本心，何求美人折？</div>' };
   
   const router = new VueRouter({
     routes: [
       { path: '/author/:id', component: Author,
         children: [
           {
             path: 'first',
             component: AutFirst
           },
           {
             path: 'secnd',
             component: AutSecnd
           },
           {
             path: 'third',
             component: AutThird
           },
           {
             path: 'forth',
             component: AutForth
           },       
         ]
       },
       { path: '/author2/:id', component: Author2,
         children: [
           {
             path: 'first',
             component: AutFirst2
           },
           {
             path: 'secnd',
             component: AutSecnd2
           },
           {
             path: 'third',
             component: AutThird2
           },
           {
             path: 'forth',
             component: AutForth2
           },       
         ]
       }
     ],
   });

   new Vue({
    el:'#app',
     router
   });

想看一个真正的实例路由，请点击查看代码
https://github.com/ferrinte/meizu/blob/master/template/after_ser.html