轉(zhuǎn)至：http://www.hangge.com/blog/cache/detail_2133.html
Vue.js - 路由 vue-router 的使用（vue-navigation插件的使用）
在之前的文章中我介紹了?vue-router?結(jié)合??組件從而實(shí)現(xiàn)頁(yè)面緩存的功能。但默認(rèn)情況下悯许，在發(fā)生路由跳轉(zhuǎn)后构诚，我們代碼中是不知道這個(gè)跳轉(zhuǎn)屬于前進(jìn)還是后退纽匙，這樣對(duì)于一些特殊需求就不好實(shí)現(xiàn)了，比如：
實(shí)現(xiàn)前進(jìn)刷新囚戚，后退不刷新顺少。
前進(jìn)、后退分別使用不同的過場(chǎng)動(dòng)畫澄阳。
雖然我們可以通過在url?中添加一個(gè)?key，或者使用?meta?配置層級(jí)的方法來實(shí)現(xiàn)區(qū)分踏拜，但總歸不方便碎赢。其實(shí)使用?vue-navigation?這個(gè)第三方組件可以完美解決這個(gè)問題。
一速梗、基本介紹
1肮塞，什么是 vue-navigation?
（1）vue-navigation?是一個(gè)基于?vue?與?vue-router?的第三方導(dǎo)航庫(kù)。
（2）與?keep-alive?相似姻锁，vue-navigation?可以保存頁(yè)面狀態(tài)枕赵。
（3）比?keep-alive?強(qiáng)的是，vue-navigation?保存狀態(tài)是可以識(shí)別路由的前進(jìn)后退的位隶。其導(dǎo)航默認(rèn)行為類似手機(jī)?APP?的頁(yè)面導(dǎo)航（假設(shè)?A拷窜、B、C?為頁(yè)面）：
A?前進(jìn)到?B涧黄，再前進(jìn)到?C篮昧；
C?返回到?B?時(shí)，B?會(huì)從緩存中恢復(fù)笋妥；
B?再次前進(jìn)到?C懊昨，C?會(huì)重新生成，不會(huì)從緩存中恢復(fù)挽鞠；
C?前進(jìn)到?A疚颊，A?會(huì)生成狈孔，現(xiàn)在路由中包含?2?個(gè)?A?實(shí)例信认。
2，安裝方法
進(jìn)入?vue?項(xiàng)目文件夾后執(zhí)行如下命令進(jìn)行安裝：
npm i -S vue-navigation
3均抽，配置方法
（1）首先在?main.js?文件中引入并啟用導(dǎo)航組件：
import Vue from?'vue'
import App from?'./App'
import router from?'./router'
import Navigation from?'vue-navigation'
Vue.use(Navigation, {router})
Vue.config.productionTip =?false
new?Vue({
??el:?'#app',
??router,
??components: { App },
??template:?'<App/>'
})
注意：vue-navigation?在?url?中添加了一個(gè)?key?來區(qū)分路由嫁赏。key?的名稱默認(rèn)為?VNK，我們可以將其修改成其他的油挥。
Vue.use(Navigation, {router,keyName: 'hangge'})
（2）如果項(xiàng)目還用到了?vuex潦蝇，我們可以使用如下方式啟用導(dǎo)航組件款熬，傳入?store?后：
vue-navigation?會(huì)向?store?注冊(cè)一個(gè)?Module（Module?的默認(rèn)名稱為?navigation）。
同時(shí)在頁(yè)面跳轉(zhuǎn)時(shí)會(huì)提交?navigation/FORWARD?或?navigation/BACK?或?navigation/REFRESH攘乒。
main.js中代碼則引入store組件贤牛，如下：
import Vue from?'vue'
import App from?'./App'
import router from?'./router'
import store from?'./store'?// vuex store 實(shí)例
import Navigation from?'vue-navigation'
Vue.use(Navigation, {router, store})
Vue.config.productionTip =?false
new?Vue({
??el:?'#app',
??store,
??router,
??components: { App },
??template:?'<App/>'
})
注意：Module?的默認(rèn)名稱同樣是可以更改的。
Vue.use(Navigation, {router, store, moduleName: 'navigation', keyName: 'VNK'})
引入 vuex的方法
安裝 : npm install vuex --save?
使用: 然后我們?cè)陧?xiàng)目的src目錄下新建一個(gè)目錄store则酝，在該目錄下新建一個(gè)index.js文件殉簸，我們用來創(chuàng)建vuex實(shí)例，然后在該文件中引入vue和vuex沽讹，創(chuàng)建Vuex.Store實(shí)例保存到變量store中般卑，最后使用export default導(dǎo)出store：
（3）然后在?App.vue?中使用?<navigation>?組件將?router-view?包裹起來即可。
<template>
??<div?id="app">
????<navigation>
??????<router-view/>
????</navigation>
??</div>
</template>
二爽雄、使用樣例
1蝠检，效果圖
項(xiàng)目中共有“步驟1”“步驟2”“步驟3”這個(gè)?3?個(gè)頁(yè)面（默認(rèn)加載步驟1）
當(dāng)從步驟?2?返回步驟?1?時(shí)，步驟?1?之前的內(nèi)容數(shù)據(jù)仍然保留挚瘟。同樣從步驟?3?返回步驟?2?時(shí)叹谁，步驟?2?之前的內(nèi)容數(shù)據(jù)仍然保留。
而從步驟?3?跳轉(zhuǎn)到步驟?1?時(shí)乘盖，步驟?1?會(huì)重新生成（不顯示之前數(shù)據(jù)）本慕。同樣從步驟?1?前進(jìn)到步驟?2、步驟?2?前進(jìn)道步驟?3侧漓，這些下一步頁(yè)面也是重新生成锅尘。
2，樣例代碼
路由配置（router/index.js）
import Vue from?'vue'
import Router from?'vue-router'
import step1 from?'@/components/step1'
import step2 from?'@/components/step2'
import step3 from?'@/components/step3'
Vue.use(Router)
export?default?new?Router({
??routes: [
????{
??????path:?'/',
??????name:?'step1',
??????component: step1
????},
????{
??????path:?'/step2',
??????name:?'step2',
??????component: step2
????},
????{
??????path:?'/step3',
??????name:?'step3',
??????component: step3
????}
??]
})
步驟1（step1.vue）
<template>
??<div>
????<h1>步驟一</h1>
????<input type="text"?name=""?value=""><br><br>
????<button @click="gotoNextStep">下一步</button>
??</div>
</template>
<script>
export?default?{
??name:?'step1',
??methods: {
????gotoNextStep() {
??????this.$router.push('/step2');
????}
??}
}
</script>
步驟2（step2.vue）
<template>
??<div>
????<h1>步驟二</h1>
????<input type="text"?name=""?value=""><br><br>
????<button @click="gotoPrevStep">上一步</button>
????<button @click="gotoNextStep">下一步</button>
??</div>
</template>
<script>
export?default?{
??name:?'step2',
??methods: {
????gotoPrevStep() {
??????this.$router.go(-1);
????},
????gotoNextStep() {
??????this.$router.push('/step3');
????}
??}
}
</script>
步驟3（step3.vue）
<template>
??<div>
????<h1>步驟三</h1>
????<input type="text"?name=""?value=""><br><br>
????<button @click="gotoPrevStep">上一步</button>
????<button @click="gotoStep1">回到首頁(yè)</button>
??</div>
</template>
<script>
export?default?{
??name:?'step2',
??methods: {
????gotoPrevStep() {
??????this.$router.go(-1);
????},
????gotoStep1() {
??????this.$router.push('/');
????}
??}
}
</script>
三布蔗、路由改變的事件響應(yīng)
? ? vue-navigation?提供了許多事件監(jiān)聽方法藤违，我們可以在不同的事件響應(yīng)方法中執(zhí)行不同的功能操作（比如前進(jìn)或后退使用不同的動(dòng)畫）
1，功能說明
（1）vue-navigation?支持如下?5?種事件類型的監(jiān)聽：
forward：前進(jìn)
back：后退
replace：替換
refresh：刷新
reset：重置
（2）而監(jiān)聽方法有?on()纵揍、once()顿乒、off()?這?3?種，每個(gè)方法都有?to泽谨、from?這個(gè)兩個(gè)參數(shù)（分別代表來源路由璧榄、目標(biāo)路由），to吧雹、from?參數(shù)內(nèi)屬性如下：
name：路由的名稱（包含?key骨杂，類型為?string）
route：vue-route?的路由信息對(duì)象
2，使用樣例
（1）這里我們修改?App.vue?代碼雄卷，監(jiān)聽常用的事件并輸出到控制臺(tái)搓蚪。
<template>
??<div id="app">
????<navigation>
??????<router-view/>
????</navigation>
??</div>
</template>
<script>
export?default?{
??name:?'App',
??created() {
??????// bind event
??????this.$navigation.on('forward', (to, from) => {
????????console.log('forward to', to,?'from ', from)
??????})
??????this.$navigation.on('back', (to, from) => {
????????console.log('back to', to,?'from ', from)
??????})
??????this.$navigation.on('replace', (to, from) => {
????????console.log('replace to', to,?'from ', from)
??????})
??????this.$navigation.on('refresh', (to, from) => {
????????console.log('refresh to', to,?'from ', from)
??????})
??????this.$navigation.on('reset', () => {
????????console.log('reset')
??????})
??????// and use [once, off] methods
??????this.$navigation.once('forward', () => {
????????console.log('appear once')
??????})
??????const off = () => {
????????console.log('will not appear')
??????}
??????this.$navigation.on('forward', off)
??????this.$navigation.off('forward', off)
????}
}
</script>
（2）我們從步驟?1?->?步驟?2?->?步驟?3，接著再一步步回退到步驟?1丁鹉，控制臺(tái)輸出如下：
四妒潭、組件方法
1悴能，方法介紹
vue-navigation?提供了如下兩個(gè)方法可以對(duì)路由記錄進(jìn)行操作：
getRoutes()：獲取路由記錄
cleanRoutes()：清空路由記錄
2，使用說明
（1）在全局環(huán)境中使用?Vue.navigation?進(jìn)行調(diào)用：
Vue.navigation.cleanRoutes();
（2）在?Vue?實(shí)例中使用?this.$navigation?進(jìn)行調(diào)用：
this.$navigation.cleanRoutes();
