转至：http://www.hangge.com/blog/cache/detail_2133.html
Vue.js - 路由 vue-router 的使用（vue-navigation插件的使用）
在之前的文章中我介绍了 vue-router 结合 组件从而实现页面缓存的功能。但默认情况下，在发生路由跳转后，我们代码中是不知道这个跳转属于前进还是后退，这样对于一些特殊需求就不好实现了，比如：
实现前进刷新，后退不刷新。
前进、后退分别使用不同的过场动画。
虽然我们可以通过在url 中添加一个 key，或者使用 meta 配置层级的方法来实现区分，但总归不方便。其实使用 vue-navigation 这个第三方组件可以完美解决这个问题。
一、基本介绍
1，什么是 vue-navigation?
（1）vue-navigation 是一个基于 vue 与 vue-router 的第三方导航库。
（2）与 keep-alive 相似，vue-navigation 可以保存页面状态。
（3）比 keep-alive 强的是，vue-navigation 保存状态是可以识别路由的前进后退的。其导航默认行为类似手机 APP 的页面导航（假设 A、B、C 为页面）：
A 前进到 B，再前进到 C；
C 返回到 B 时，B 会从缓存中恢复；
B 再次前进到 C，C 会重新生成，不会从缓存中恢复；
C 前进到 A，A 会生成，现在路由中包含 2 个 A 实例。
2，安装方法
进入 vue 项目文件夹后执行如下命令进行安装：
npm i -S vue-navigation
3，配置方法
（1）首先在 main.js 文件中引入并启用导航组件：
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 中添加了一个 key 来区分路由。key 的名称默认为 VNK，我们可以将其修改成其他的。
Vue.use(Navigation, {router,keyName: 'hangge'})
（2）如果项目还用到了 vuex，我们可以使用如下方式启用导航组件，传入 store 后：
vue-navigation 会向 store 注册一个 Module（Module 的默认名称为 navigation）。
同时在页面跳转时会提交 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 实例
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 的默认名称同样是可以更改的。
Vue.use(Navigation, {router, store, moduleName: 'navigation', keyName: 'VNK'})
引入 vuex的方法
安装 : npm install vuex --save
使用: 然后我们在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后使用export default导出store：
store中index.js文件的初始配置
（3）然后在 App.vue 中使用 <navigation> 组件将 router-view 包裹起来即可。
<template>
<div id="app">
<navigation>
<router-view/>
</navigation>
</div>
</template>
二、使用样例
1，效果图
项目中共有“步骤1”“步骤2”“步骤3”这个 3 个页面（默认加载步骤1）
当从步骤 2 返回步骤 1 时，步骤 1 之前的内容数据仍然保留。同样从步骤 3 返回步骤 2 时，步骤 2 之前的内容数据仍然保留。
而从步骤 3 跳转到步骤 1 时，步骤 1 会重新生成（不显示之前数据）。同样从步骤 1 前进到步骤 2、步骤 2 前进道步骤 3，这些下一步页面也是重新生成。
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">回到首页</button>
</div>
</template>
<script>
export default {
name: 'step2',
methods: {
gotoPrevStep() {
this.$router.go(-1);
},
gotoStep1() {
this.$router.push('/');
}
}
}
</script>
三、路由改变的事件响应
vue-navigation 提供了许多事件监听方法，我们可以在不同的事件响应方法中执行不同的功能操作（比如前进或后退使用不同的动画）
1，功能说明
（1）vue-navigation 支持如下 5 种事件类型的监听：
forward：前进
back：后退
replace：替换
refresh：刷新
reset：重置
（2）而监听方法有 on()、once()、off() 这 3 种，每个方法都有 to、from 这个两个参数（分别代表来源路由、目标路由），to、from 参数内属性如下：
name：路由的名称（包含 key，类型为 string）
route：vue-route 的路由信息对象
2，使用样例
（1）这里我们修改 App.vue 代码，监听常用的事件并输出到控制台。
<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，控制台输出如下：
四、组件方法
1，方法介绍
vue-navigation 提供了如下两个方法可以对路由记录进行操作：
getRoutes()：获取路由记录
cleanRoutes()：清空路由记录
2，使用说明
（1）在全局环境中使用 Vue.navigation 进行调用：
Vue.navigation.cleanRoutes();
（2）在 Vue 实例中使用 this.$navigation 进行调用：
this.$navigation.cleanRoutes();
网友评论