Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

ღ暖雨᭄ꦿ࿐

已于 2022-04-15 21:19:58 修改

阅读量708

点赞数 2

分类专栏： vue 文章标签： vue 前端框架

于 2022-04-15 21:17:32 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52487969/article/details/124204042

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Vue Router 3.5.2及以上版本中，如何避免因参数重复导致的异常，并提供了在router/index.js中重写push和replace方法的详细步骤，确保程序正常运行。

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

报错原因：
vue-router版本3.5.2之后，引入了promise，当传递参数多次且重复，会抛出异常，因此出现上面现象。这种异常，对于程序是没有任何影响的。编程式导航（push|replace）才会有这种情况的异常，声明式导航是没有这种问题，因为声明式导航内部已经解决这种问题。

解决办法：
在路由文件router/index.js中重写vue-router的push|replace方法，传入相应的成功的回调与失败的回调，当失败时，不输出任何信息。

①先对VueRouter.prototype身上的push|replace方法进行备份。

let originPush=VueRouter.prototype.push;
let originReplace=VueRouter.prototype.replace;

②重写vue-router的push|replace方法

VueRouter.prototype.push=function (location,resolve,reject){
    if(resolve&&reject){
        //call：调用函数一次，篡改函数上下文一次
        originPush.call(this.location,resolve,reject);
    }else{
        originPush.call(this,location,()=>{},()=>{});
    }
}
VueRouter.prototype.originReplace=function (location,resolve,reject){
    if(resolve&&reject){
        originReplace.call(this.location,resolve,reject);
    }else{
        originReplace.call(this,location,()=>{},()=>{});
    }
}