技术实践

一个关于vue-router引起的bug

至于我上面的问题,困扰我好几天,首先我一直没有排查到这个问题时由router引起的,而后我跟踪到vite构建方式,网络有也有人遇这个问题,但

羊先生的头像
羊先生2022.03.27 · 2 分钟阅读 · 87 阅读
一个关于vue-router引起的bug封面
文章正文还需 2 分钟

第一次进没有问题,当我保存后,因为是热更新状态下,保存后,浏览器会自动刷新,如是出现了如下错误

于是我尝试着去排查错误,

image.png

一 文件都确认已经正确引入

并且第一次是正常的,修改任意保存后,出现的故障

image.png

二 检查create文件

发现只有使用自己封装的axios文件就会报这个问题

image.png

带着疑问

检查request.ts文件,既然有问题,最后我发现引入的这个router出了这个问题, 删除后没有任何问题

image.png
image.png

修改router使用方式

经过搜索后,我换了一种方式使用

js 复制代码
import { useRouter } from 'vue-router';
const router = useRouter();
router.push(routerSet.resetPath).then()

测试

测试没有这个问题,一切正常

小记:至于我上面的问题,困扰我好几天,首先我一直没有排查到这个问题时由router引起的,而后我跟踪到vite构建方式,网络有也有人遇这个问题,但是没有给出解决方案,我一直以为是我在优化代码的时候哪里出问题了,导致循环问题

后面我也会跟踪下这个问题,我猜测跟新的vite构建以及和vue-router4模式的变化,带来了新的使用的方式