编程式路由重复跳转就会报错误：NavigationDuplicated: Avoided redundant navigation to current location

原创

已于 2022-08-16 17:47:37 修改 · 2.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #vue.js

于 2022-08-12 16:49:15 首次发布

在Vue.js应用中，使用`this.$router.push()`进行路由跳转时，如果参数不变地重复跳转，会出现NavigationDuplicated错误。尽管不影响程序运行，但可以通过三种方式解决此问题：1) 在`push`调用中添加成功回调；2) 使用`catch`捕获错误；3) 重写原型链上的`push`方法，以全局防止此类错误。通过重写`push`和`replace`方法，可以从源头避免重复代码。本文分享了作者遇到的问题及解决方案，并欢迎大家指出可能存在的问题。

当使用 this.$router.push() 进行路由跳转的时候，当第一次使用路由跳转的时候是不会出现这个问题的，但是当你再一次跳转到这页面的时候且参数的数据也没有发生改变，就会报这个错误。

虽然这个报错没有影响到程序的正常运行，但是这个问题的话也是不难解决的。我这里就是主要提供了三种方案。

第一种方案：在路由跳转的里面加上一个成功的回调函数

  this.$router.push({},()=>{})

第二种方案：使用 catch 捕获错误的 promise

this.$router.push({}).catch(()=>{})

this.$router.push() 该放啥还是放啥，在后面多加一个成功的回调或者捕获失败的的回调就可以很好的解决这个问题了，但是第一种和第二种方案都是针对某一个路由跳转的，其他的路由跳转要是也想实现这个功能的话虽然说加上去就行了，但是会增加很多的代码量，所以就有了第三种方案。

第三种方案：重写原型链上的push方法

// 缓存原来的 push 方法
const originalPush = VueRouter.prototype.push
//指定新的push方法
VueRouter.prototype.push = function (location, onResolve, onReject) {
  //制定了一个成功或者失败的回调
    if (onResolve || onReject) {
        //直接调用原来的 push 方法
        // originalPu