用vue开发手机端网页,用到了vant 的 tabbar组件,
因为封装了tabbar代码,导致切换的时候,tabbar上来都是active的初始选中状态,每次都是默认的零,
尝试了很多方法,最后发现最原始的把当前状态存到本地存储也是可以实现的,
我一开始用的这个方法但是没有生效,原因是什么呢,很简单
数据是Number类型,存到Loaclstorage之后再取出来变成了string
可以明显看到两个数据类型是不一样的,
使用强制转换之后就可以了
this.active = Number(localStorage.getItem('Active'))
另外一个遇到的坑就是,封装之后点击tabbar需要点击两次,图标才会被选中,第一次点击时会跳转页面,但是图标并不会被选中,经过实验,有两种方法可以达到目的,
首先我一开始封装components之后是在单个页面进行掉用的,
需要把他放到App.vue里面进行掉用,用监听路由的方式来判断在哪个页面需要显示哪个页面不需要
具体代码如下
//监听器
watch: {
// 方法1
'$route' (to, from) { //监听路由是否变化
if(to.name=='Integral'||to.name=='Class'||to.name=='S