用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=='ShopCar'||to.name=='My'){
        this.tabType=true
        localStorage.setItem('Tab',this.tabType)
      }else {
        this.tabType=false
        localStorage.setItem('Tab',this.tabType)
      }
		},
	},

<!-- 底部 -->
    <div v-if="tabType" class="st-bottom"><Bottoms_Two /></div> 

这样之后有个问题就是如果我刷新之后就会回到初始状态，我将当前的tabbar显示隐藏的参数存到本地存储，然后在页面加载时获取，赋值
具体代码如下
并且要注意跟上面一样的情况，布尔型数据存储后再读取就变成了string类型，要注意类型转换

 created(){
    this.tabType = localStorage.getItem('Tab') ==="false" ? false : true
  },

第二种方法是继续单个页面引用，但是在封装的底部vue文件中做判断
具体代码如下

created() {
    if (this.$route.name == "/") {
        this.active = 0;
      } else if (this.$route.name == "Navigation") {
        this.active = 1;
      } else if (this.$route.name == "Refuel") {
        this.active = 2;
      } else if (this.$route.name == "Me") {
        this.active = 3;
      }
  }