vue router 报错：Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated"...}

原创于 2019-10-14 16:03:28 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue-router #NavigationDuplicated

vue 专栏收录该内容

5 篇文章

订阅专栏

本文解决了一个常见问题：在项目开发中，使用Vue-router时，重复点击相同菜单路由导致的控制台报错现象。通过分析，发现此问题是由于vue-router版本升级至3.1.0后，路由跳转采用Promise方式处理造成的。提供了两种解决方案：一是降级vue-router至3.0.x版本；二是修改Router.prototype.push方法，捕获并忽略错误。

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

问题（知其然）

触发操作：在项目开发中，重复点击当前菜单路由会报错，报错不影响功能使用
报错详情如下：
在这里插入图片描述

原因（知其所以然）

经过多方查找&实践，发现是vue-router的版本问题引起的。
vue-router的更新日志显示 v3.1.0 版本的路由跳转改用了 promise 的方式，针对于路由跳转相同的地址，如果没有捕获到错误，控制台始终会出现上面的错误

下方是vue-router v3.1.0 的更改记录，感兴趣的可以看一下
在这里插入图片描述

解决方法（亲测有用）

vue-router降级，安装v3.0.x版本
在 import Router from ‘vue-router’ 后引入如下代码

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