vue-navigation使用和报错解决

夏子涵呀呀呀

已于 2022-01-21 11:27:56 修改

阅读量1.5k

点赞数 1

分类专栏： vue 文章标签： vue

于 2021-07-23 15:27:07 首次发布

本文链接：https://blog.youkuaiyun.com/aizenmoxiguan/article/details/119034885

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在Vue应用中如何使用vue-navigation插件来防止页面回退时操作重置的问题。通过详细步骤展示了安装、引入和使用vue-navigation的过程，并解决了因vue-router版本或代码冲突导致的跳转错误。最终，通过调整router.js中的代码成功实现了页面后退时保持操作状态的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、为什么要使用

当页面返回上一页的时候会发现页面回到了初始场景，之前的操作也都回到了原始范围，而有时候我们需要后退时页面定格在操作之后，此时就可以使用vue-navigation

2、如何使用

1、下载安装

npm install vue-navigation

2、在main.js中引入

import Navigation from 'vue-navigation'
Vue.use(Navigation, {router})

3、在App.vue中使用

<navigation>
      <router-view />
    </navigation>

4、此时浏览器地址栏路由参数会出现?VNK=xxxxxxx
在这里插入图片描述
5、此时操作，发现后退时，页面会保留操作，前进则会初始化

3、其它问题

1、查看控制台。console会出现跳转错误
在这里插入图片描述
百度寻找解决方法，有人建议把vue-router版本降为3.0.7，此时重新运行发现还是报错
然后发现在router.js中插入如下代码，报错解决。

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}