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

Myth丶恋晨 2023-06-11 07:23 166阅读 0赞

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

本文链接：[https://blog.csdn.net/weixin\_43202608/article/details/98884620][https_blog.csdn.net_weixin_43202608_article_details_98884620]

今天在写项目时发现了在点击 router-link 会造成报错的问题， 报错内容为： ![在这里插入图片描述][20190808204951320.png]

废话不多说，解决方法很简单，把项目依赖的 `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)
    }

*  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`， 所以会报一下错误：  
![在这里插入图片描述][20190928220850338.png]  
所以使用了方法二就别再引入方法三的代码片段了。

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

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

[https_blog.csdn.net_weixin_43202608_article_details_98884620]: https://blog.csdn.net/weixin_43202608/article/details/98884620
[20190808204951320.png]: /images/20230531/a4367e3d003445c8bcf38850ccd5c470.png
[20190928220850338.png]: /images/20230531/8c4f920f9bac430c83cf3abdc962b156.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwMjYwOA_size_16_color_FFFFFF_t_70]: /images/20230531/6b6d739c24ad46f0a99078a04d2cdd54.png