vue（Vue-Router3.1.0+）中，连续多次单击同一个路由标签（单击该标签会发生路由跳转）跳转路由时，出现Uncaught (in promise)错误。

目录

1 错误

2 原因

3 解决方法

1 错误

vue中，连续多次单击同一个路由标签（单击该标签会发生路由跳转）跳转路由时，出现Uncaught (in promise)错误。

如：上代码以及图如下

当我们连续多次单击个人中心时，会发生下图错误Uncaught (in promise)错误。

2 原因

在 Vue-Router3.1.0+，此时如果支持 Promise，router.push或 router.replace将返回一个 Promise。当我们在脚手架中使用this.$router.replace(path)进行路由跳转的时候，返回一个Promise对象，发生未捕获的异常。

3 解决方法

参考了网上许多帖子，有如下办法

1）方法一：Vue-Router版本降级，就是用回以前的Vue-Router版本（这个我没有试过，不建议使用）

2）方法二：在使用Vue-Router中router.push或 router.replace时，使用catch捕获异常。这个的话，就是每次使用时，都需要在后面添加异常捕获，比较麻烦，而且容易漏添加。

this.$router.replace(path).catch(err => {
    console.log(err)
})

3）方法三：对Vue-Router原型链上的router.push或 router.replace方法进行重写，这样就不用每次调用方法都要加上catch。（亲测有效，强烈建议）

在main.j或者index.js中（选一个）添加以下代码。注意，因为我自己使用的是relplace方法，所以我对该方法进行了重写，如果使用push方法，请对push方法进行重写。

import VueRouter from "vue-router"


/*解决一下报错问题：下面三行语句解决报错问题
* Uncaught (in promise) NavigationDuplicated
* {_name: “NavigationDuplicated”, name: "NavigationDuplic}的报错问*/

const originalPush = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
    return originalPush.call(this, location).catch(err => err)
};

参考：本文参考网上多篇文章，实测第三种方法

百里于2020年7月2日

如果有错，请您指出！如有侵权，请联系我删除！