vue实现前进刷新后退不刷新页面

使用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)
})

本文参考：https://blog.csdn.net/gxdvip/article/details/101016946