使用vue-cli写项目时,用到了vant 里的tabbar组件,在点击不同的tab时,对应的tab标签颜色无法及时更新,控制台提示错误如下:
解决办法:
先来看vant 的tabbar组件:
tabbar组件使用了active值来控制标签的切换,默认active的值为0
效果如下:
在点击不同的标签进行route切换时,出现了冗余的问题,需要在created生命周期中重新获取一下active的值即可:
在这里使用了localStorage来存储active的值,只需要将localStorage里面的值获取到即可:
由于localStorage只能存储string类型的数据,所以在存储时可使用:
JSON.stringify(localStorage.setItem('a',_a))
想将其重新转换成js支持的值,可使用
JSON.parse(localStorage.getItem('a');