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

今天在写项目时发现了在点击 router-link 会造成报错的问题, 报错内容为: 在这里插入图片描述

废话不多说,解决方法很简单,把项目依赖的 node_modules 文件夹删除, 然后再 npm install 重新下载依赖包就可以解决。

=========================================================================
2019年8月13日更新

发现以上方法很多人都不能成功解决,经过多次尝试发现原因可能是 在重新下载依赖包时,安装的vue-router还是之前出错的那个版本,那么要怎么解决呢?解决方法也很简单,在项目目录下运行 npm i vue-router@3.0 -S 即可

如果不想换 vue-router 的版本 或者 还是 没有用,那么可以用以下方法
在main.js下添加一下代码:

import Router from 'vue-router'

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

=========================================================================
2019年9月28日更新

看到很多小伙伴们想知道这报错是什么原因造成的,经过测试,此报错的vue-router版本是3.1.0
而vue-router在3.1.0 版本的路由跳转使用的是 promise 的方式,可能是因为vue的官方人员没设计好而造成了BUG。
而方法二的npm i vue-router@3.0 -S 下载的是 3.0.x 的版本,路由跳转可能没有用到 promise ,所以可以解决此报错,但使用的 3.0.x 版本的 vue-router 去引入 方法三的 代码段,因可能此版本没用到 promise, 所以会报一下错误:
在这里插入图片描述
所以使用了方法二就别再引入方法三的代码片段了。

vue-router 官方 在 2019-08-06 推出的 vue-router@3.1.1 已经修复了此bug
在这里插入图片描述

目前安装 3.1.1 以上的vue-router版本既可解决此报错

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 70

打赏作者

织咲

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值