Vue-router切换路由时重复点击同一个路由报错问题/连续点击多次路由报错


这是 vue-router 4.0之后常见的错误了,我们自己尝试看看是出了什么问题:

首先,我们先在路由切换函数中,输出切换路由路径之前和切换后的 this.$route

如下图,

所以,我们认为是 vue-router 的问题

解决方法是:

在路由切换前面添加一句代码 this.$router.push("/location").catch((err) => { console.log(err); });
如图,

当然,还有其他解决方法,这里就不一一列举出来了。

此外,我们在调用 this.$route.path 会因为延时问题而导致错误,比如 tabbar中处于活跃状态时,文本需是活跃类,那么我们会这样使用来避免出错:

原因是因为这个延时问题是非常非常短的,我们只需要在这个延时过去之后才判读当前路径是否与 this.link(组件路径)相同,这样就避免了这个错误了。
解释:上面中当调用了 ItemClick 方法后,this.$route.path 会被赋值为 this.link,然后计算属性中的 isActive是在这个方法执行后才执行的(这个时间已经足够然这个延时过去了),所以就避免了这个因为延时问题而导致的错误。

以上如有不对,欢迎指正。

对延时问题更加清晰的补充:

点击首页,this.$route.path 为 "/home",1s后还是"/home",

然后点击分类,this.$route.path 为 "/location",之后变为是"/category",
所以能清楚的知道,对 this.$router.replace(...)修改后,this.$route.path 并不会是刚刚修改的那个值,而是要过了这个延时后才被赋予为刚刚所修改的值。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM