<template>
<div>
<van-tabbar v-model="active" @change="changeTabbar(active)">
<van-tabbar-item icon="shop">首页</van-tabbar-item>
<van-tabbar-item icon="exchange">列表页</van-tabbar-item>
<van-tabbar-item icon="cart" :info="itemCount">购物车</van-tabbar-item>
<van-tabbar-item icon="contact">会员中心</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
import store from "../../store"
import { mapState, mapActions } from "vuex"
export default{
// vue使用props动态传值给子组件里面的函数用
props:['floorTitle'],
data(){
return{
active: 0
}
},
created(){
this.changeTabActive()
},
watch:{ // 当数据发生改变的时候再赋值
// floorData 监视的对象
},
computed: {
...mapState({
items: state => store.state.shopcart.items,
totalNumber: state => store.state.shopcart.totalNumber,
totalMoney: state => store.state.shopcart.totalMoney,
itemCount: state => store.state.shopcart.itemCount
})
},
updated(){
this.changeTabActive()
},
methods:{
changeTabbar(active){
console.log(active)
switch (active) {
case 0:
//使用name跳转，因为路径有时候会改变，这样就需要改编程式导航，比较麻烦
this.$router.push({name:'Main'})
break;
case 1:
this.$router.push({name:'goodsList'})
break
case 2:
this.$router.push({name:'cart'})
break
case 3:
this.$router.push({name:'user'})
default:
break;
}
},
changeTabActive(){
this.nowPath=this.$route.path //vue提供的方法
if(this.nowPath=="/shoppingMall"){
this.active=0
}else if(this.nowPath=="/goodsList"){
this.active=1
}else if(this.nowPath=="/cart"){
this.active=2
}else if(this.nowPath=="/user"){
this.active=3
}
}
},
watch:{
'$route': 'changeTabActive'
}
}
</script>
网友评论