【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