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

本站以现代、古代情诗为主，情诗网创办于2013年，以原创爱情诗歌、经典情诗、现代情诗、古代情诗、英文情诗、情诗绝句为主并收集古诗、古诗词、诗歌大全、诗词名句的文学门户。方便您下次继续阅读；可以放在浏览器的收藏夹中（快捷键Ctrl+D）;或者看到喜欢或者有趣的诗词可以通过分享按钮给你的好友分享；情诗网是目前最全情诗大全网站之一。并欢迎广大诗歌爱好者阅览投稿！喜欢本站的话请大家把本站告诉给你朋友哦！地址是 www.qingshiwang.com ！