Vue中通过重写push和replace方法来解决路由跳转时出现NavigationDuplicated问题

1.NavigationDuplicated问题出现的原因

NavigationDuplicated错误通常发生在用户在短时间内多次点击相同的路由连接时，原因是因为Vue-Router的push方法会将新的路由添加到历史记录中，并导航到该路由。当多次快速点击相同的路由链接时，会导致多次调用push方法，从而在浏览器历史记录中添加了多个相同的路由。然后，Vue-Router会检测到这个重复的路由导航，并抛出NavigationDuplicated错误。 

 2.解决方法

         为了解决这个问题，可以对push和replace方法进行重写。通过重写push和replace方法，可以在路由跳转之前检查当前路由是否与目标路由相同，相同则不进行跳转，从而避免了重复导航。

//对push方法进行重写
VueRouter.prototype.push = function (location, resolve, reject) {
  if (resolve && reject) {
      originPush.call(this, location, resolve, reject);
  } else {
      originPush.call(this, location, () => { }, () => { });
  }
}
//重写replace方法
const originReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function (location, resolve, reject) {
  if (resolve && reject) {
      originReplace.call(this, location, resolve, reject);
  } else {
      originReplace.call(this, location, () => { }, () => { });
  }
}

在vue-router引入时通过上诉代码对push和replace方法进行重写，应该就可以避免NavigationDuplicated问题。