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="https://www.cnblogs.com/vue.js"></script>
3 <script src="https://www.cnblogs.com/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 >...</div>
5 </transition>
6 `
7 }
8
9 const Bar = {
10 template: `
11 <transition name="fade">
12 <div >...</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），它會自動從根路徑開始，依次匹配/com1、/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地址匹配多個組件的需求了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/3862.html
標籤：其他
上一篇：JS-物件常用方法整理
下一篇：JS-陣列常用方法整理