多次执行相同的push、replace问题（重写push、replace）

💂 个人网站: 【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴， 请点击【前端学习交流群】

1.多次执行相同的push、replace问题

编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误

注意:编程式导航（push|replace）才会有这种情况的异常，声明式导航是没有这种问题，因为声明式导航内部已经解决这种问题。

这种异常，对于程序没有任何影响的。

为什么会出现这种现象:

由于vue-router最新版本3.5.2，引入了promise，当传递参数多次且重复，会抛出异常，因此出现上面现象。

例如：使用this.$router.push({name:‘Search’,params:{keyword:“…”||undefined}})时，如果多次执行相同的push，控制台会出现警告。

let result = this.$router.push({name:"Search",query:{keyword:this.keyword}})
console.log(result)

执行一次上面代码：

多次执行出现警告：

原因：push是一个promise，promise需要传递成功和失败两个参数，我们的push中没有传递。

2.解决问题

1. 第一种方案（不推荐）

this.$router.push({name:‘Search’,params:{keyword:“…”||undefined}},()=>{},()=>{})

后面两项分别代表执行成功和失败的回调函数。

这种写法治标不治本，将来在别的组件中push|replace,编程式导航还是会有类似错误

2. 第二种方案（推荐）

push是VueRouter.prototype的一个方法，在router中的index重写该方法（重写push和replace）

//需要重写VueRouter.prototype原型对象身上的push|replace方法
//先把VueRouter.prototype身上的push|replace方法进行保存一份
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.push
//重写VueRouter.prototype身上的方法了
VueRouter.prototype.push = function (location, resolve, reject) {
  //第一个形参：路由跳转的配置对象（query|params）
  //第二个参数：undefined|箭头函数（成功的回调）
  //第三个参数:undefined|箭头函数（失败的回调）
  if (resolve && reject) {
    //push方法传递第二个参数|第三个参数（箭头函数）
    //originPush：利用call修改上下文，变为(路由组件.$router)这个对象，第二参数：配置对象、第三、第四个参数：成功和失败回调函数
    originPush.call(this, location, resolve, reject);
  } else {
    //push方法没有产生第二个参数|第三个参数
    originPush.call(
      this,
      location,
      () => { },
      () => { }
    )
  }
}
//重写VueRouter.prototype身上的replace方法了
VueRouter.prototype.replace = function (location, resolve, reject) {
  if (resolve && reject) {
    originReplace.call(this, location, resolve, reject);
  } else {
    originReplace.call(
      this,
      location,
      () => { },
      () => { }
    );
  }
};

文章有写的不当的地方，欢迎指正修改。如果感觉文章实用对你有帮助，欢迎点赞收藏和关注，你的点赞关注就是我动力，大家一起学习进步。