未选中tabbar：灰色字体，灰色图标 选中tabbat:蓝色字体，蓝色图标
/**
* 开发思路：
* 定义数组list用来表示tabbar(每一项含有name,icon,icon_active,path属性)
* 需要有一个标记active来记录选中的是第几个tabbar，用于控制当前选中tabbar图标和字体颜色均为蓝色
* 用什么方式存储active? 1本地存储 2vuex(刷新时，数据重新初始化，需要借助本地存储)
* 借助路由组件独享的钩子beforeRouteLeave，来存储active
* 配置到这里发现从路由页面A切换到路由页面B，没什么问题了，但是直接刷新路由页面B，vuex数据初始化了， 需要用本地存储存储每次active的最新值，刷新的时候取本地存储里active的值赋给vuex初始状态
* vuex配置的时候，给modules独享命名空间（使用：this.$store.state.mobile.tabbar;this.$store.commit('mobile/changeTabbar',0)）
*/
// @/mixins/tabbar.js,给路由组件混入tabbar,路由切换时触发beforeRouteLeave
beforeRouteLeave(to,from,next){
console.log('路由页面离开之前',to);
switch (to.name) {
case 'Home':
this.$store.commit('mobile/changeTabbar',0)
break;
case 'PoliciesRegulations':
this.$store.commit('mobile/changeTabbar',1)
break;
case 'Intelligent':
this.$store.commit('mobile/changeTabbar',2)
break;
case 'Notice':
this.$store.commit('mobile/changeTabbar',3)
break;
case 'My':
this.$store.commit('mobile/changeTabbar',4)
break;
}
next() //跳转
}
// @/store/index.js,直接进入路由组件，vuex刷新，借助本地存储初始化
const store=new Vuex.Store({
modules:{
mobile:{
namespaced:true,
state:{
tabbar:tabbar||0
},
mutations:{
changeTabbar(state,data){
// console.log('changeTabbar',data);
state.tabbar=data
localStorage.setItem('tabbar',data)
}
},
actions:{}
}
}
})
// 用active控制哪个tabbar高亮
<div class="mobile_bottom_list">
<router-link :to="item.path" tag="div" class="mobile_bottom_item" :class="active===index?'active':''" v-for="(item,index) in list" :key="item.id">
<img class="mobile_bottom_icon" :src="active===index?item.icon_active:item.icon" alt="">
<span class="mobile_bottom_name">{{item.name}}</span>
</router-link>
</div>
