vue學(xué)習(xí)之Vue-Router用法實例分析

本文實例講述了vue學(xué)習(xí)之Vue-Router用法。分享給大家供大家參考，具體如下：

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供溫泉網(wǎng)站建設(shè)、溫泉做網(wǎng)站、溫泉網(wǎng)站設(shè)計、溫泉網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、溫泉企業(yè)網(wǎng)站模板建站服務(wù)，10多年溫泉做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

Vue-router就像一個路由器，將組件(components)映射到路由(routes)后，通過點擊<router-link>它可以在<router-view>中將相應(yīng)的組件渲染出來。

1、使用vue-router的步驟

  //1、創(chuàng)建路由組件
  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},
    {path:'/',redirect:'/link1'}        //配置根路由，使其重定向到/link1
  ];
  //3、創(chuàng)建router實例
  const router = new VueRouter({
    routes                   //縮寫，相當(dāng)于 routes: routes
  });
  // 4、 創(chuàng)建和掛載根實例。
  const app = new Vue({
    router
  }).$mount('#app');              //掛載到id為app的div

注意：要設(shè)置根路由，頁面加載完成后默認(rèn)顯示根路由，否則將什么也不顯示。

在頁面中調(diào)用路由接口，<router-link> 默認(rèn)會被渲染成一個 `<a>` 標(biāo)簽，點擊后在<router-view>渲染指定模板

  <div class="col-lg-offset-2 col-lg-2">
    <!-- 使用 router-link 組件來導(dǎo)航. -->
    <!-- 通過傳入 `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、嵌套路由

通過每個路由內(nèi)的children數(shù)組屬性可以為每個路由再配置子路由，子路由的路徑是基于父路由目錄下的，默認(rèn)路徑會進行疊加。例如上面再link1中添加intro與feature兩個子路由，在link1模板中使用兩個子路由：

  <template id="link1">
    <div>
      <h4>白羊座</h4>
      <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>

最終效果如圖：

vue學(xué)習(xí)之Vue-Router用法實例分析

3、動態(tài)路由

在路由路徑中綁定變量，使其根據(jù)不同的變量值跳轉(zhuǎn)到不同頁面，例如將path:"goods/:goodsId"，假如當(dāng)goodsId為15時，就會路由到/goods/15頁面。

4、編程路由

通過js代碼控制路由頁面的跳轉(zhuǎn)與傳值。例如給button綁定事件jump，在methods內(nèi)實現(xiàn)：

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

頁面跳轉(zhuǎn)到根下的cart目錄，并且傳遞參數(shù)goodsId，值為123。在cart頁面通過$route.query接收參數(shù)，直接在頁面內(nèi)使用：

注意：區(qū)分跳轉(zhuǎn)是$router，接收參數(shù)是$route

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

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

5、命名路由

當(dāng)路由路徑過長時，也可以用name屬性為路徑命名，在<router-link>中使用動態(tài)綁定:to="{name:'路徑名'}"訪問。例如白羊座的鏈接上使用 :to="{name:'ariesIntro'}"，可直接跳轉(zhuǎn)到link1下的Intro頁面。

還可以對視圖進行命名，將組件渲染到指定視圖位置，例如在父組件中有一個默認(rèn)視圖與兩個命名視圖一左一右：  

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

在根路由中設(shè)置其組件components，將默認(rèn)視圖渲染為GoodsList，左邊cartview視圖渲染為Cart組件，右邊imgview渲染為Image組件：

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

結(jié)果如下：

vue學(xué)習(xí)之Vue-Router用法實例分析

希望本文所述對大家vue.js程序設(shè)計有所幫助。

新聞名稱：vue學(xué)習(xí)之Vue-Router用法實例分析
當(dāng)前網(wǎng)址：http://bm7419.com/article30/gocpso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、虛擬主機、小程序開發(fā)、網(wǎng)站設(shè)計公司、App設(shè)計、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)