前言
写vue项目中遇到了导航栏绑定的active不改变,路由正常跳转了结果导航栏显示还是第一个。
于是我就开始排错,发现每次路由跳转,导航栏绑定的activeNum都被刷新掉归0了,也就是显示第一个。刚开始确实好久没发现问题,以前也是这么写的没出过问题。
转机
后来我想是不是因为,这个导航栏是在router-view跳转的子组件中的原因,页面跳转的时候将整个子组件都刷新了,表面上看是子组件中的子组件刷新(相当于孙子级别的组件刷新),其实跳转的时候是刷新的整个子组件。
解决
然后我就在子组件的导航栏中created下加了方法,每次刷新完了的话调用超热created中的方法获取路由,然后再拿获取到的路由去和导航栏对应的路由进行比对,获取到对应的索引再给activeNum赋值!就这样成功的解决啦!!!
总结
在路由跳转的时候如果是如果有多个层级的路由,那么出了第一个层级路由的父组件不会刷新以外,其他层级的路由都会将整个子组件刷新。如果想解决的话也可以尝试用keep-alive解决问题(ps:我没试过)
放一下解决的代码
created() {
this.navBarItem.forEach((item,index) => {
//检测当前路由路径 然后跳转到对应的item
if(decodeURI(this.$route.path).search(item.path) != -1) {
this.activeNum = index;
}
})
},