Vue-router

 Vue Router是Vue.js官方的路由管理器，嚴格來講，它是一款插件，但它又和Vue.js核心深度集成，Vue Router的版本依賴於Vue.js的版本，最新的vue-router 3.0 依賴於Vue.js 2.0及以上版本。

 

一　　安裝Vue-router

 

　　1，簡介

　　Vue Router 有兩種模式，分別是HTML5 History模式和hash模式。咱們知道，Vue.js是主要用於構建單頁面應用用戶界面的漸進式框架，因此hash是Vue推薦的主力模式，若是你要使用History模式，須要配合後端進行一些單獨的設置。

　　Vue Router 提供的主要功能包括但不限於：

　　　　嵌套路由和視圖；

　　　　基於模塊化、組件化的路由配置；

　　　　路由參數、查詢；

　　　　簡單過渡效果。

　　　　

　　2，安裝

　　　安裝Vue Router也很簡單，三種方式：script標籤本地引入，CDN加速，模塊化開發npm安裝。

1 //標籤本地引入
2 <script src="/vue.js"></script>
3 <script src="/vue-router.js"></script>
4 //vue-router依賴於vue.js,序偶一要先引入vue.js

1 //CDN加速
2 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
3 <script src='https://unpkg.com/vue-router/dist/vue-router.js'></script>
4 //一樣須要先引入vue.js

1 //shell npm安裝
2 npm install vue-router -d 3 //根據須要選擇安裝方式

　　若是在模塊化工程中使用它，必需要經過 Vue.use() 明確地安裝路由功能：

1 import Vue from 'vue.js'
2 import VueRouter from 'vue-router.js'
3 
4 Vue.use('vueRouter') 5 //手動安裝路由功能

 　　vue-router安裝完成後，會在window上註冊一個VueRouter屬性，它是一個構造函數，稍後咱們須要用它建立一個路由對象，並掛載到vue實例上。

 

二　　路由規則

 

　　1，基本模式

　　使用Vue Router只須要簡單的四步：

　　　　a：定義路由組件；

1 const Foo = { template: '<div>foo</div>' } 2 const Bar = { template: '<div>bar</div>' } 3 //路由只須要模板對象，並不須要把該模板對象註冊成真實的Vue組件，這一點須要特別注意

　　　　b：定義路由規則；

 1 const routes = [  2  {  3         path: '/foo',  4  component: Foo  5  },  6  {  7         path: '/bar',  8  component: Bar  9  } 10 ] 11 //路由規則是一個對象數組，每個對象構建一條完整的路由規則，其中path和component是規則的必要屬性，他們規定：在path指定的路徑渲染component指定的組件。 

　　　　c：建立路由實例；

1 const router = new VueRouter( 2     routes //ES6語法，至關於routes：routes
3 ); 4 //爲了能讓路由最終運行起來，須要先建立一個router實例，稍後咱們將選擇合適的時機把它掛在到vue根實例上

　　　　d：把路由實例掛載到vue根實例。

1 //方式一
2 const vm = new Vue({ 3     el:'#app', 4  router 5 }); 6 //方式二
7 const vm = new Vue({ 8  router 9 }).$mount('#app');

　　在JavaScript中設置好後還不夠，爲了在頁面上有所表現，還須要在HTML頁面中指定路徑導航和組件渲染出口。

 1 <div id="app">
 2     <p>
 3         <router-link to="/foo" tag="button">Foo</router-link>
 4         <router-link to="/bar">Bar</router-link>
 5     </p>
 6     <div>
 7         <router-view></douter-view>
 8     </div>
 9 </div>
10 <!-- 使用<router-link>標籤來導航，它默認將被渲染爲<a>標籤，你能夠經過tag屬性來改變這一默認行爲 -->
11 <!-- <router-view>標籤是路由的出口，路由規則匹配的組件模板對象將被註冊成真正的Vue組件，並替換該出口標籤 -->

　　在完成以上這些操做後，頁面上最終會有一個按鈕和一個連接，點擊他們將渲染對應的組件。

　　

　　2，路由重定向

　　若是隻是上面那樣設置，會存在一個問題：首次進入頁面時不會有任何組件被渲染。通常狀況下，咱們第一次進入頁面，即根域名下時，但願展現一個默認組件，vue-router有兩種方式能夠實現。

 1 const routes = [  2     {//重定向到一個已知組件
 3         path:'/',  4         redirect:'/foo'
 5  },  6     {//指定一個額外的頁面，好比歡迎頁
 7         path:'/',  8         redirect:'/welcome'
 9  } 10 ]

　　

　　3，激活的樣式

　　　爲了讓用戶得到更好的體驗，當用戶點擊某個<router-link>時，咱們能夠給這個導航組件設置特別的樣式，以提醒用戶當前渲染的是什麼，vue-router提供了兩個css類來實現這一功能：router-link-active和router-link-exact-active。

1 router-link-active{
2     /*some code*/
3 }
4 router-link-exact-active{
5     /*some code*/
6 }

　　另外你還能夠經過給路由實例添加linkActiveClass和linkExactActiveClass兩個屬性來自定義這兩個類名。

　　這兩個類的最終效果相同，但router-link-exact-active的優先級更高。

　　

　　4，路由過渡

　　咱們知道，<router-view>是基本的動態組件，因此咱們能夠用 <transition> 組件給它添加一些過渡效果。

1 <transition>
2   <router-view></router-view>
3 </transition>

　　上面的方式會給全部路由設置相同的過渡效果，若是你想給每一個路由單獨設置過渡效果，那麼你須要在子組件內部單獨使用<transition>，併爲它設置name屬性。

 1 const Foo = {  2  template: `  3     <transition name="slide">
 4       <div class="foo">...</div>
 5     </transition>
 6  `  7 }  8 
 9 const Bar = { 10  template: ` 11     <transition name="fade">
12       <div class="bar">...</div>
13     </transition>
14  ` 15 }

 

三　　路由操做

 

　　1，路由傳參

　　VueRouter有兩種方式向組件傳遞參數，分別是：$route.query和$route.params。下面經過示例來詳細說明。

<div id="app">
    <router-link tag="button" to="/com1?name=ren&age=12">$route.query</router-link>
    <router-link tag="button" to="/com2/ren/12">$route.params</router-link>
    <router-view><router-view>
</div>

<script>
    var com1 = { template:"<div>{{$route.query.name}}:{{$route.query.age}}</div>", }; var com2 = { template:"<div>{{$route.params.name}}:{{$route.params.age}}</div>", }; const routerObj = new VueRouter({ routes:[ {path:'/com1',component:com1}, {path:'/com2/:age/:name',component:com2},] }); var vm = new Vue({ el:"#app", router:routerObj }); </script>

　　請注意兩種方式使用時的差別：$route.query 經過url的查詢參數（？問號後面的）傳遞數據，而且不須要修改路由規則（path屬性）。$route.params 須要修改路由規則，經過定義變量（：冒號佔位符）來獲取數據，而且，路由規則中定義了多少個變量，觸發路由（點擊<router-link>）時就必須傳遞多少個，不然路由將不能正常工做。

 

　　2，路由嵌套

 　　VueRouter經過children屬性實現路由嵌套。children屬性是路由規則對象的另外一個屬性，和path，component屬性同級。

 1 <div id="app">
 2     <router-link to="/com1">com1<router-link>
 3     <router-view></router-view>
 4 </div>
 5 
 6 <template id="com1">
 7     <router-link to="/com1/login">login</router-link>
 8     <router-view></router-view>
 9 </template>
10 <template id="login">
11     <p>login</p>
12 </template>

 1 var routerObj = new VueRouter({  2  routes:[  3  {  4             path:'/com1',  5  component:com1,  6  children:[  7                 {path:'login',component:login}  8  ]  9  } 10  ] 11 });

　　根路徑下點擊com1按鈕將展現com1組件，在com1組件內有一個login按鈕，點擊該按鈕將在com1組件內展現login組件。

　　這裏有一個注意點，children屬性中的路由規則對象，其path屬性不須要從根路徑開始匹配（不須要從/斜線開始），當觸發該路由時（/com1/login），它會自動從根路徑開始，依次匹配/com一、/com1/path，最終成功渲染login組件。

　　

　　3，命名視圖

　　多數時候，當路由規則匹配到一個url路徑時，咱們須要展現的組件不止一個，這時候，咱們就須要命名視圖來幫忙了。

 1 <div id="app">
 2     <router-view></router-view>
 3     <router-view name="left"></router-view>
 4     <router-view name="right"></router-view>
 5 </div>
 6 
 7 <script>
 8     var header = {template:'<div>header</div>'};  9     var left = {template:'<div>left</div>'}; 10     var right = {template:'<div>right</div>'}; 11 
12  const routerObj = new VueRouter({ 13  routes:[ 14  { 15  path:'/', 16  components:{default:header,left,right} 17  } 18  ] 19 }); 20 
21     var vm = new Vue({ 22  el:'app', 23  router:routerObj 24  }); 25 </script>

　　經過給<router-view>添加name屬性，並在路由規則對象中添加多個組件模板，便可以實現統一url地址匹配多個組件的需求了。