App.vue页面
<!--使用vant组件-->
<van-tabbar v-model="active" active-color="#22b662"
inactive-color="#000" @change="change">
</van-tabbar>
change方法监听所点击的哪个tabbar
methods:{
change(active){
<!--active所点击的值,存储到sessionStorage中-->
window.sessionStorage.setItem("active",active)
// console.log(active) //active是我们所点击的索引值
}
},
<!--监听一下当前被点击的是哪个页面-->
<!--this.$route.path是路由自带的一种方法-->
watch:{
$route(){
switch(this.$route.path){
case "/" : this.active=0
break
case "/cate" : this.active=1
break
case "/find" : this.active=2
break
case "/shopscar" : this.active=3
break
case "/mypage" : this.active=4
break
}
}
created(){
<!--获取sessionStorage中的值-->
if(!JSON.parse(window.sessionStorage.getItem("active"))){
this.active=0
<!--如果我们没有在sessionStorage里面找到所存储的值,
我们就默认选中了首页-->
return
}
this.active=JSON.parse(window.sessionStorage.getItem("active"))
}