解决Vue报错: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current locatio-CSDN博客

本文链接：https://blog.csdn.net/weixin_51696862/article/details/132722851

文章介绍了在VueRouter3.0版本后，由于使用Promise处理路由跳转导致的`NavigationDuplicated`错误。提供了两种解决方法：重写push和replace方法，以防止重复导航并确保性能。

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

无废话篇，直接上解决办法

原因：这是因为你多次触发路由跳转事件，且跳转的url地址都是同一个。

解决方法：重写push / replace方法

在入口文件(main.js)中添加

import VueRouter from 'vue-router'

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

const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace(location) {
   return originalReplace.call(this, location).catch(err => err)
}

new Vue({
  render: h => h(App)....

上面的代码还有第二种写法,实现原理都一样

import VueRouter from 'vue-router'

let originPush =VueRouter.prototype.push;
let originReplace =VueRouter.prototype.replace;
VueRouter.prototype.push=function(location,resolve,reject){
  if(resolve&&reject){
    originPush.call(this,location,resolve,reject)    
  }else{
    originPush.call(this,location,()=>{},()=>{})
  }
}
VueRouter.prototype.replace=function(location,resolve,reject){
  if(resolve&&reject){
    originReplace.call(this,location,resolve,reject)
  }else{
    originReplace.call(this,location,()=>{},()=>{})
  }
}

new Vue({
  render: h => h(App)....

第二种方式：在push方法后面加上两个参数resolve和reject

this.$router.push('/search/'+this.keyWord)

替换成

this.$router.push('/search/'+this.keyWord,()=>{},()=>{})

废话部分：（解释一下原理）

这个问题是在vue-router在3的版本之后就有的，原因是因为编程式路由在使用push或者replace方法进行路由跳转，底层是使用了ES6中的Promise，每次push或者replace之后就会返回一个promise对象，能够执行回调处理导航成功或者失败的情况。

为什么会报NavigationDuplicated的错误？这其实是Vue Router 提供了一种机制来避免重复导航，从而提高应用程序的性能和稳定性。