mint ui的tabBar监听路由变化实现tabBar切换

mint ui的tabBar监听路由变化实现tabBar切换

官方文档，窗口管理
http://dev.dcloud.net.cn/mui/window/#openwindow

document.getElementById('info').addEventListener('tap', function() {
	//打开关于页面
	mui.openWindow({
		url: 'examples/info.html', //目标页面地址
		id:'info' //触发新打开页面的id
	});
});

说明
最近学习vue，使用了mint ui的tabBar，感觉好难受，结合 tab-container使用更难受，因为它不是根据路由来切换页面的。mui与它基本相反，因此它能根据搜索栏的路由变化，相应的tabBar高亮显示，而mint ui就不能，要加点代码实现了。

mint ui tabBar标签栏

//页面 和 数据
<template>
    <div id="main">
        <mt-tabbar v-model="selected">
            <mt-tab-item :id="home">
                首页
            </mt-tab-item>
            <mt-tab-item :id="car">
                购物车
            </mt-tab-item>
            <mt-tab-item :id="person">
                我的
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                //页面刷新取数据
                selected: sessionStorage.getItem('selected')? JSON.parse(sessionStorage.getItem('selected')):'首页',
                home: '首页',
                car: '购物车',
                person: '我的',      
            }
        }
    }
</script>

监听路由的变化
监听路由的变化，那就要使用到侦听器 watch 了。一旦selected变化，就保存到 sessionStorage，当页面刷新的时候，在初始化数据取出即可。

data(){
       return {
          //默认显示首页，但是一旦sessionStorage有数据 当浏览器刷新的时候，取出该值，就实现了刷新不跳转了
          selected: sessionStorage.getItem('selected')? JSON.parse(sessionStorage.getItem('selected')):'首页'
      }   
 },
 watch: {
      selected(val, oldVal){
          //一旦标签栏变化，把selected的值存到sessionStorage，保存当前值
          sessionStorage.setItem('selected', JSON.stringify(val))
          if(val === this.home){
              //路由跳转 到首页
              this.$router.replace('/home')          
          }else if(val === this.car){
              //路由跳转 到购物车
              this.$router.replace('/car')            
          }else if(val === this.person){
              //路由跳转 到个人中心
              this.$router.replace('/person')           
          }
      }