当前位置:   article > 正文

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

router-link报错navigationduplicated

今天在写项目时发现了在点击 router-link 会造成报错的问题, 报错内容为:
在这里插入图片描述
解决方法很简单,把项目依赖的 node_modules 文件夹删除, 然后再 npm install 重新下载依赖包就可以解决。

=================================================================

发现以上方法很多人都不能成功解决,经过多次尝试发现原因可能是 在重新下载依赖包时,安装的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)
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

================================================================
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版本既可解决此报错

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/224693
推荐阅读
相关标签
  

闽ICP备14008679号