使用vue-navigation插件
安装vue-navigation
npm i -S vue-navigation
或者
yarn add vue-navigation
main.js
import Vue from 'vue'
import router from './router' // vue-router instance
import Navigation from 'vue-navigation'
Vue.use(Navigation, {router})
App.vue
<template>
<navigation>
<router-view></router-view>
</navigation>
</template>
使用以上操作即可完成前进刷新页面后退不刷新页面,但是在vue3项目中控制台会报错。
解决方案:
原因
vue router ≥ v3.1 后 ,回调形式改成promise api了,返回的是promise,如果没有捕获到错误,控制台始终会出现如图的警告。
解决方法一
// 在引用vue-router的页面添加一段代码
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
解决方法二(推荐)
// 补齐 router.push() 的第三个参数
this.$router.push(route, () => {}, (e) => {
console.log('输出报错',e)
})
解决方法三(推荐)
// 捕获 router.push 异常
this.$router.push(route).catch(err => {
console.log('输出报错',err)
})