vue多層嵌套路由實例分析

更新時間：2019年03月19日 10:00:20 作者：白楊-M

這篇文章主要介紹了vue多層嵌套路由,結(jié)合實例形式分析了vue.js多層嵌套路由的概念、原理及相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了vue多層嵌套路由。分享給大家供大家參考，具體如下：

多層嵌套：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <script src="bower_components/vue-router/dist/vue-router.js"></script>
  <style>
    .v-link-active{
      font-size: 20px;
      color: #f60;
    }
  </style>
</head>
<body>
  <div id="box">
    <ul>
      <li>
        <a v-link="{path:'/home'}">主頁</a>
      </li>
      <li>
        <a v-link="{path:'/news'}">新聞</a>
      </li>
    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
  <template id="home">
    <h3>我是主頁</h3>
    <div>
      <a v-link="{path:'/home/login'}">登錄</a>
      <a v-link="{path:'/home/reg'}">注冊</a>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </template>
  <template id="news">
    <h3>我是新聞</h3>
  </template>
  <script>
    //1. 準(zhǔn)備一個根組件
    var App=Vue.extend();
    //2. Home News組件都準(zhǔn)備
    var Home=Vue.extend({
      template:'#home'
    });
    var News=Vue.extend({
      template:'#news'
    });
    //3. 準(zhǔn)備路由
    var router=new VueRouter();
    //4. 關(guān)聯(lián)
    router.map({
      'home':{
        component:Home,
        subRoutes:{
          'login':{
            component:{
              template:'<strong>我是登錄信息</strong>'
            }
          },
          'reg':{
            component:{
              template:'<strong>我是注冊信息</strong>'
            }
          }
        }
      },
      'news':{
        component:News
      }
    });
    //5. 啟動路由
    router.start(App,'#box');
    //6. 跳轉(zhuǎn)
    router.redirect({
      '/':'home'
    });
  </script>
</body>
</html>

效果圖：

路由其他信息:

/detail/:id/age/:age
{{$route.params | json}}    -> 當(dāng)前參數(shù)
{{$route.path}}    -> 當(dāng)前路徑
{{$route.query | json}}    -> 數(shù)據(jù)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <script src="bower_components/vue-router/dist/vue-router.js"></script>
  <style>
    .v-link-active{
      font-size: 20px;
      color: #f60;
    }
  </style>
</head>
<body>
  <div id="box">
    <ul>
      <li>
        <a v-link="{path:'/home'}">主頁</a>
      </li>
      <li>
        <a v-link="{path:'/news'}">新聞</a>
      </li>
    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
  <template id="home">
    <h3>我是主頁</h3>
    <div>
      <a v-link="{path:'/home/login/zns'}">登錄</a>
      <a v-link="{path:'/home/reg/strive'}">注冊</a>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </template>
  <template id="news">
    <h3>我是新聞</h3>
    <div>
      <a v-link="{path:'/news/detail/001'}">新聞001</a>
      <a v-link="{path:'/news/detail/002'}">新聞002</a>
    </div>
    <router-view></router-view>
  </template>
  <template id="detail">
    {{$route.params | json}}
    <br>
    {{$route.path}}
    <br>
    {{$route.query | json}}
  </template>
  <script>
    //1. 準(zhǔn)備一個根組件
    var App=Vue.extend();
    //2. Home News組件都準(zhǔn)備
    var Home=Vue.extend({
      template:'#home'
    });
    var News=Vue.extend({
      template:'#news'
    });
    var Detail=Vue.extend({
      template:'#detail'
    });
    //3. 準(zhǔn)備路由
    var router=new VueRouter();
    //4. 關(guān)聯(lián)
    router.map({
      'home':{
        component:Home,
        subRoutes:{
          'login/:name':{
            component:{
              template:'<strong>我是登錄信息 {{$route.params | json}}</strong>'
            }
          },
          'reg':{
            component:{
              template:'<strong>我是注冊信息</strong>'
            }
          }
        }
      },
      'news':{
        component:News,
        subRoutes:{
          '/detail/:id':{
            component:Detail
          }
        }
      }
    });
    //5. 啟動路由
    router.start(App,'#box');
    //6. 跳轉(zhuǎn)
    router.redirect({
      '/':'home'
    });
  </script>
</body>
</html>

效果圖：