解决 vue-router 升级导致的 Uncaught (in promise) NavigationDuplicated

梦里梦外; 2023-09-28 23:13 26阅读 0赞

##  ##

## 一、原因 ##

路由跳转有两种形式：

*  **声明式**：`<router-link :to="...">`
 *  **编程式**：`router.push(...)`

声明式导航是没有这种问题的，这是因为 vue-router 底层已经处理好了。

而编程式导航连续点击进行路由跳转的时候，就会在控制台抛出 Uncaught (in promise) NavigationDuplicated 错误信息，错误信息如下：

![cbd56840d9794aefab11552637c164c6.png][]

这是因为 vue-router 版本升级到了 v3.1.0 之后，push 和 replace 方法会返回一个 promise，如果没有对错误进行捕获，那么控制台就会输出未捕获异常。

## 2 解决方法（四种方法） ##

方法一：使用时对错误进行捕获。

this.$router.push('home').catch(err => { return err })

方法二： 使用时给 push 传递相应的成功、失败的回调函数。

this.$router.push({ path: 'home' }, () => {}, () => {})

方法三：降低 vue-router 版本为 3.0。

npm install vue-router@3.0

方法四：重写 push 和 replace 方法，只需要在 router 文件夹下的 index.js 文件里面加入如下代码即可。（我项目上也是使用这种方法）

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

[cbd56840d9794aefab11552637c164c6.png]: https://img-blog.csdnimg.cn/cbd56840d9794aefab11552637c164c6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE.js项目中控制台报错： Uncaught (in promise) NavigationDuplicated解决方法

使用vue-router的`this.$router.replace`进行路由跳转的时候快速点击会报错 Uncaught (in promise) Navigatio...

我不是女神ヾ/ 2024年04月20日 08:11/ 0 赞/ 148 阅读

相关前端请求Uncaught (in promise)错误

问题描述：前端请求时报一下错误 ![在这里插入图片描述][98bc80eb48984fff9321ab021026fcb4.png] 解决办法：请求调用的时候加上`

心已赠人/ 2024年03月23日 11:16/ 0 赞/ 116 阅读

相关解决 vue-router 升级导致的 Uncaught (in promise) NavigationDuplicated

一、原因路由跳转有两种形式：声明式：`<router-link :to="...">` 编程式：`router.push(...)` 声明式导

梦里梦外;/ 2023年09月28日 23:13/ 0 赞/ 27 阅读

相关 vue router 报错： Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法

vue router 报错： Uncaught (in promise) NavigationDuplicated \{\_name:""NavigationDuplicat

Myth丶恋晨/ 2023年06月11日 07:23/ 0 赞/ 326 阅读

相关 Uncaught (in promise) undefined

在用vue做项目时在控制台出现Uncaught (in promise) undefined的错误提示，虽然不影响到功能但对于一个有严格要求的程序员来说心里看着就不舒服了，不过

末蓝、/ 2023年02月13日 03:44/ 0 赞/ 151 阅读

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

报错： Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to curren

叁歲伎倆/ 2022年12月15日 11:20/ 0 赞/ 314 阅读

相关解决Vue重复点击导航，跳转相同路由出现Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation

问题描述：重复点击导航时，控制台出现报错，虽然不影响功能使用，但也不能视而不见。 Uncaught (in promise) NavigationDuplicated: A

灰太狼/ 2022年09月09日 11:51/ 0 赞/ 267 阅读

相关解决Uncaught (in promise) reason的问题

解决Uncaught (in promise) reason的问题报错如下 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmF

喜欢ヅ旅行/ 2022年08月28日 05:47/ 0 赞/ 215 阅读

相关 ionic Uncaught (in promise): Error: StaticInjectorError[NavController]

在服务(provider)中t引入NavController时出现错误：Uncaught (in promise): Error: StaticInjectorError\[N

╰+攻爆jí腚メ/ 2022年06月01日 10:14/ 0 赞/ 296 阅读

相关 vue项目：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

问题： `Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation t

水深无声/ 2021年07月25日 17:18/ 0 赞/ 684 阅读