Vue.js - 路由 vue-router 的使用详解7(vue-navigation插件的使用)
在之前的文章中我介绍了 vue-router 结合 <keep-alive> 组件从而实现页面缓存的功能。但默认情况下,在发生路由跳转后,我们代码中是不知道这个跳转属于前进还是后退,这样对于一些特殊需求就不好实现了,比如:
- 实现前进刷新,后退不刷新。
- 前进、后退分别使用不同的过场动画。
虽然我们可以通过在 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 文件中引入并启用导航组件:
(3)然后在 App.vue 中使用 <navigation> 组件将 router-view 包裹起来即可。
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。
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'})
(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();