本文例項講述了vue學習之Vue-Router用法。分享給大家供大家參考，具體如下：

Vue-router就像一個路由器，將元件(components)對映到路由(routes)後，通過點選<router-link>它可以在<router-view>中將相應的元件渲染出來。

1、使用vue-router的步驟

  //1、建立路由元件
  const Link1={template:'#link1'};
  const Link2={template:'#link2'};
  const Link3={template:'#link3'};
  //2、定義路由對映
  const routes=[
    {
      path:'/link1',//定義相對路徑
      component:Link1,//定義頁面的元件
      children:[
        {
          path:'intro',//子路由/link1/intro
          component:{template:'#ariesIntro'},name:'ariesIntro',//為路由命名
        },{
          path:'feature',component:{template:'#ariesFeature'},},{path:'/',redirect:'intro'}
      ]
    },{path:'/link2',component:Link2},{path:'/link3',component:Link3},redirect:'/link1'}        //配置根路由，使其重定向到/link1
  ];
  //3、建立router例項
  const router = new VueRouter({
    routes                   //縮寫，相當於 routes: routes
  });
  // 4、 建立和掛載根例項。
  const app = new Vue({
    router
  }).$mount('#app');              //掛載到id為app的div

注意：要設定根路由，頁面載入完成後預設顯示根路由，否則將什麼也不顯示。

在頁面中呼叫路由介面，<router-link> 預設會被渲染成一個 `<a>` 標籤，點選後在<router-view>渲染指定模板

  <div class="col-lg-offset-2 col-lg-2">
    <!-- 使用 router-link 元件來導航. -->
    <!-- 通過傳入 `to` 屬性指定連結. -->
    <router-link class="list-group-item" :to="{name:'ariesIntro'}">白羊座</router-link>
    <router-link class="list-group-item" to="/link2">處女座</router-link>
    <router-link class="list-group-item" to="/link3">金牛座</router-link>
  </div>
  <div class="col-lg-6">
    <div class="panel">
      <div class="panel-body">
        <!-- 路由出口，路由匹配到的元件將渲染在這裡 -->
        <router-view></router-view>
      </div>
    </div>
  </div>

2、巢狀路由

通過每個路由內的children陣列屬性可以為每個路由再配置子路由，子路由的路徑是基於父路由目錄下的，預設路徑會進行疊加。例如上面再link1中新增intro與feature兩個子路由，在link1模板中使用兩個子路由：

  <template id="link1">
    <div>
      <h3>白羊座</h3>
      <ul class="nav nav-tabs">
        <li class="active">
          <router-link to="/link1/intro">簡介</router-link>
        </li>
        <li><router-link to="/link1/feature">特點</router-link></li>
      </ul>
      <div class="tab-content">
        <router-view></router-view>
      </div>
    </div>
  </template>

最終效果如圖：

3、動態路由

在路由路徑中繫結變數，使其根據不同的變數值跳轉到不同頁面，例如將path:"goods/:goodsId"，假如當goodsId為15時，就會路由到/goods/15頁面。

4、程式設計路由

通過js程式碼控制路由頁面的跳轉與傳值。例如給button繫結事件jump，在methods內實現：

jump(){
  this.$router.push('/cart?goodsId=123')
}

頁面跳轉到根下的cart目錄，並且傳遞引數goodsId，值為123。在cart頁面通過$route.query接收引數，直接在頁面內使用：

注意：區分跳轉是$router，接收引數是$route

<span>商品ID：{{$route.query.goodsId}}</span>

也可以指定頁面向前向後跳轉：this.$router.go(2)，向前跳轉兩步 ，向後跳轉一步go(-1)。

5、命名路由

當路由路徑過長時，也可以用name屬性為路徑命名，在<router-link>中使用動態繫結:to="{name:'路徑名'}"訪問。例如白羊座的連結上使用 :to="{name:'ariesIntro'}"，可直接跳轉到link1下的Intro頁面。

還可以對檢視進行命名，將元件渲染到指定檢視位置，例如在父元件中有一個預設檢視與兩個命名檢視一左一右：

<router-view></router-view>
<router-view class="left" name="cartview"></router-view>
<router-view class="right" name="imgview"></router-view>

在根路由中設定其元件components，將預設檢視渲染為GoodsList，左邊cartview檢視渲染為Cart元件，右邊imgview渲染為Image元件：

new Router({
 routes: [
  {
   path: '/',components:{
    default:GoodsList,cartview:Cart,imgview:Image
   }
}

結果如下：

希望本文所述對大家vue.js程式設計有所幫助。