vant vue 开发手机端网页vant tabbar双击显示

本文链接：https://blog.youkuaiyun.com/elizebeth6/article/details/112530802

在Vue移动端开发中，使用Vant的Tabbar组件时遇到初始选中状态错误及双击才能选中图标的问题。原因是Number类型数据在Localstorage中变为string，通过类型转换解决。同时，封装后的Tabbar需根据路由判断显示，避免刷新后回到初始状态，利用Localstorage保存状态并在页面加载时转换类型。另外，也可在单个页面引用时在组件内做路由判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用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)
      }
		},
	},