vue2中解决路由keepAlive缓存时,导航切换回来时不高亮问题

今天帮朋友解决bug时,发现他使用的是vant组件库中的tabBar组件,而路由是由keepAlive包裹的,实现组件缓存效果,可是却遇到了一个坑,就是当点击导航的时候,从新再点击回来的时候会出现两个问题,一导航不会高亮,要再次点击才会高亮,二由此缓存页面跳转到其他页面时不会生效. 此时可以这样处理: activated() { this.active = this.$route.name }, activated这个函数是针对组件缓存时的生命钩子函数,当组件被激活时就会执行这个函数. deactivated函数时在组件被销毁时触发的函数. 完美的解决了组件缓存,并且切换导航的时候也能够高亮.