關(guān)鍵詞：路由

實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成酿矢。同樣地榨乎，URL 中各段動(dòng)態(tài)路徑也按某種結(jié)構(gòu)對(duì)應(yīng)嵌套的各層組件

<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>閩國(guó)揚(yáng)帆去，蟾蜍虧復(fù)圓瘫筐。</div>' };
   const AutSecnd = { template: '<div>秋風(fēng)吹渭水蜜暑，落葉滿長(zhǎng)安。</div>' };
   const AutThird = { template: '<div>此地聚會(huì)夕策肝，當(dāng)時(shí)雷雨寒肛捍。</div>' };
   const AutForth = { template: '<div>蘭橈殊未返，消息海云端之众。</div>' };

   const AutFirst2 = { template: '<div>蘭葉春葳蕤拙毫，桂華秋皎潔。</div>' };
   const AutSecnd2 = { template: '<div>欣欣此生意棺禾，自爾為佳節(jié)缀蹄。</div>' };
   const AutThird2 = { template: '<div>誰(shuí)知林棲者，聞風(fēng)坐相悅。</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
   });

想看一個(gè)真正的實(shí)例路由，請(qǐng)點(diǎn)擊查看代碼
https://github.com/ferrinte/meizu/blob/master/template/after_ser.html