vue路由push跳转同一路由报错 Avoided redundant navigation to current location：问题解决

现象

在我们日常使用vue项目中，通过push跳转同一个path的时候，控制台会报错，如图：

 

原因：

造成这个问题的原因是什么呢？我们来看看源码

原因：在vue-router源码在页面跳转的时候会有以下的代码

 

也就是说当path和当前的path是相同的时候就会报这个错误（不影响使用哦），报错的方法也就是new Error

所以我们只需要将error拦截就行了，也就是通过catch捕获error报错即可。那么我们再看看push源码是如何写的

 

可以看到当前的push是通过promise的方式来处理的。所以我们只要重写push即可，那么如何重写push呢。就需要用到原型了。

解决方案

在使用vueRouter的时候重写push即可，（当前个人 项目用的ts,所有有部分不同，js的话只需要将any 等去掉即可）

import VueRouter, { RouteConfig } from 'vue-router';
Vue.use(VueRouter);
// 解决路由重复控制台报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location: string): any {
  return (originalPush.call(this, location) as any).catch((err: any) => err);
};