【Vue】解决vue多次点击同一个路由 Uncaught (in promise) 报错问题

解决vue多次点击同一个路由 Uncaught (in promise) 报错问题

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

vue项目路由跳转时控制台出现NavigationDuplicated错误，
message: "Navigating to current location (XXX) is not allowed"

原因

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

解决方法

对Vue-Router原型链上的router.push或 router.replace方法进行重写，这样就不用每次调用方法都要加上catch，具体是重写replace还是push，看你的项目而定！！

router.push重写????

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

router.place重写????

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

参考下面链接：

https://blog.csdn.net/abc1194474469/article/details/107084442?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param