这是 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 并不会是刚刚修改的那个值，而是要过了这个延时后才被赋予为刚刚所修改的值。
posted on
