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

现象

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

原因：

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

原因：在vue-router源码在页面跳转的时候会有以下的代码
image.png
也就是说当path和当前的path是相同的时候就会报这个错误（不影响使用哦），报错的方法也就是new Error
image.png

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

可以看到当前的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);
};
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

友情链接更多精彩内容