vue router连续点击多次路由报错

在编程式导航跳转时候，连续点击多次会报NavigationDuplicated错误

  this.$router.push({name: "search"});

出现这种错误原因是因为vue-router引入了promise,当我们使用this.$router.push时候需要多添加成功或失败的回调，否则就会报出以上的错误。

这时如果我们加入成功和失败的回调，就不会报错：

 this.$router.push(
   { name: "search" },
 //成功回调
   () => {},
 //失败回调
   () => {}
 );

虽然解决了报错，但如果有多个路由跳转，这样每次都要在后面加两个回调函数，显得很繁琐，所以我们可以用另一个办法，一次性解决问题。

我们在引入vue-router所在文件下重写push和replace方法：

import VueRouter from 'vue-router';
//保存原型对象的Push
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace
//重写push方法
VueRouter.prototype.push = function (location, res, rej) {
  if (res && rej) {
    originPush.call(this, location, res, rej)
  }
  else {
    originPush.call(this, location, () => { }, () => { })
  }

}
//重写replace方法
VueRouter.prototype.replace = function (location, res, rej) {
  if (res && rej) {
    originReplace.call(this, location, res, rej)
  }
  else {
    originReplace.call(this, location, () => { }, () => { })
  }

}

 至此我们成功解决问题，