编程式路由导航连续跳转出现NavigationDuplicated报错的问题

1.错误示例

如在多次点击搜索按钮进行编程式路由跳转时控制台会出现报错NavigationDuplicated

2.分析错误产生原因

原因是在vue-router3.1.0之后, 引入了promise的语法。如果路由跳转时里面的参数没有改变，会返回一个失败的promise，如果不去处理这个失败的promise，就会抛出这个错误。而声明式路由导航不会出现这种错误，因为Vue在底层已经处理好了。

3.解决办法

方法一

我们可以在使用push和replace进行跳转时，手动的传入成功与失败的回调。

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

这种方法适用于页面较少，使用编程式路由跳转次数较小的情况下使用。如果页面较多，可以对VueRouter的push和replace方法进行重写。

方法二

重写push和replace方法
在路由文件中写入以下代码

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

//重写push
VueRouter.prototype.push = function (location, resolve, reject) {
  //如果用户传入了成功与失败的回调
  if (resolve && reject) {
    originPush.call(this, location, resolve, reject);//注意此处需要使用call方法来改变originPush的this指向，因为需要保证重定义的push方法的上下文相同
  } else {
    originPush.call(
      this,
      location,
      () => {},
      () => {}
    );
  }
  // 如果用户没传入就手动设置传入
};

//重写push
VueRouter.prototype.replace = function (location, resolve, reject) {
  //如果用户传入了成功与失败的回调
  if (resolve && reject) {
    originReplace.call(this, location, resolve, reject);//注意此处需要使用call方法来改变originPush的this指向，因为需要保证重定义的push方法的上下文相同
  } else {
    originReplace.call(
      this,
      location,
      () => {},
      () => {}
    );
  }
  // 如果用户没传入就手动设置传入
};```
这样就完成了push与replace的重写，使用后发现连续点击跳转，控制台也不会出现报错的情况了。