# 1.什么是vue-navigation?
- 基于vue和vue-router的第三方导航库
- 与keep-alive相似，vue-navigation可以保存页面状态
- 比keep-alive强的是，vue-navigation保存状态是可以识别路由的前进后退的
- A到B，B到C
- C返回到B时，B会从缓存中恢复
- B再次前进到C，C会重新生成，不会从缓存中恢复
- C前进到A，A会生成，现在路由中包含2个A实例
# 2.安装方法
npm i -S vue-navigation
1
# 3.配置方法
# 3.1 首先在main.js文件中引入并启用导航组件
import router from './router'
import Navigation from 'vue-navigation'
Vue.use(Navigation, {router})
1
2
3
4
5
6
2
3
4
5
6
注意：vue-navigation在url中添加了一个key来区分路由，key的名称默认为VNK
可以修改为其他的 Vue.use(Navigation, {router,keyName: 'huayin'})
# 3.2 如果项目还用到了vuex，我们可以使用如下方式启用导航组件，传入store后
- vue-navigation会向store注册一个Module(Module的默认名称为navigation)
- 同时在页面跳转时会提交navigation/FORWARD或navigation/BACK或navigation/REFRESH
import store from './store' // vuex store 实例
import Navigation from 'vue-navigation'
Vue.use(Navigation, {router, store})
1
2
3
4
2
3
4
# 3.3 然后在App.vue中使用组件将router-view包裹起来即可
<template>
<div id="app">
<navigation>
<router-view/>
</navigation>
</div>
</template>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 4.运行，报错
一顿操作猛如虎，一运行就报错
vue-router ≥3.0版本回调形式以及改成promise api的形式了，返回的是一个promise，如果路由地址跳转相同, 且没有捕获到错误，控制台始终会出现如图所示的警告 （注：3.0以下版本则不会出现以下警告！！！，因路由回调问题…）
方案一： 安装vue-router3.0以下版本：先卸载3.0以上版本然后再安装旧版本 npm install @vue-router2.8.0 -S
方案二： 针对于路由跳转相同的地址添加catch捕获一下异常：this.$router.push('/location').catch(err => { console.log(err) })
方案三： 在main.js下注册一个全局函数即可
import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
1
2
3
4
5
6
2
3
4
5
6
注：官方vue-router新版本路由默认回调返回的都是promise，原先就版本的路由回调将废弃！！！！