重写push和replace解决vue-router使用编程式导航重复跳转路由时控制台报错

重写push和replace

---

1. 前言：

​ 大家在使用vue-router的过程中，编程式导航一定用得很多，它让路由跳转变得更加灵活，一些复杂的业务处理也可以通过使用它来简化操作。但是，如果直接使用Vue自带的push或repalce方法，当你多次点击同一个路由时，控制台就会报错，虽然不影响代码实现的功能，但作为一个严格要求自己的前端菜鸟，怎么能忍受这样的一片红，因此，为了解决这个报错，我们可以通过重写push和replace来达到目的。

2. 问题展示：

简单搭建两个路由，分别为路由1、路由2、具体过程就不写出来了。让我们看看没有重写push和replace时的情况。如下图所示，当我点击第一次路由1，没有任何异常情况，当我再次继续点击路由1，这时就开始报错，意思大概是我现在就在router1，你别一直跳router1了。

3. 解决原理：

我知道的方法有两种。第一种就是通过给push方法传递相应的成功、失败函数，但这个方法太局限了，你再其它组件又要重新写一次，并不推荐。第二种方法就是从Vue原型上重写push方法，实质上还是应用原来的方法，只是增加了一些逻辑。在路由配置文件下，书写以下代码。

// 重写push和replace
// 先把VueRouter原型中的push方法保持一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;

// 重写push | replace
// location:告诉原来的push方法往哪里跳转，传递什么参数
// resolve:成功的回调
// reject:失败的回调
VueRouter.prototype.push = function(location,resolve,reject) {
  if(resolve && reject) {
    originPush.call(this,location,resolve,reject)
  }else { // 不管你点多少次，每次就覆盖之前的，相当于传了一次一模一样的路径
    originPush.call(this,location,()=>{},()=>{})
  }
}
VueRouter.prototype.replace = function(location,resolve,reject) {
  if(resolve && reject) {
    originReplace.call(this,location,resolve,reject)
  }else {
    originReplace.call(this,location,()=>{},()=>{})
  }
}

4. 问题解决：

如下图所示，在重写了push和replace方法后，不管怎么点击都不会再次报错，完美的解决问题。

5. 总结：

该问题也是我在项目的学习中所碰到的，自己可能写得不太清晰，当个记录吧。总之就是，解决问题一定在源头上解决，比如这里通过修改原型，这也表示了源码的重要性啊。同时call和apply的区别，之前学习了又忘了，过几天补上。