<template>
    <div id="gkbottomBarVTwo">
        <router-view />
        <div class="denglu">
            <!--<van-tabbar v-model="active" v-show="userWriteAreaLogin"  @change="onChange">-->
            <van-tabbar v-model="active" v-show="userWriteAreaLogin">
                <van-tabbar-item to="/gkbottomBarVTwo/home?active=0"><img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.normal" >首页</van-tabbar-item>
                <van-tabbar-item to="/gkbottomBarVTwo/RealTimeData?active=1"><img slot="icon" slot-scope="props" :src="props.active ? icon1.active : icon1.normal">实时数据</van-tabbar-item>
                <van-tabbar-item to="/gkbottomBarVTwo/EventSheet?active=2"><img slot="icon" slot-scope="props" :src="props.active ? icon2.active : icon2.normal">事件工单</van-tabbar-item>
                <van-tabbar-item to="/gkbottomBarVTwo/mine?active=3"><img slot="icon" slot-scope="props" :src="props.active ? icon3.active : icon3.normal">我的</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
export default {
    name:‘gkbottomBarVTwo‘,
    data(){
        return {
            active:0,
            userWriteAreaLogin:true,//默认登录了
            icon: {
                normal: ‘static/daohang/shouyeNo.png‘,
                active: ‘static/daohang/shouye.png‘
            },
            icon1: {
                normal: ‘static/daohang/jianceNo.png‘,
                active: ‘static/daohang/jiance.png‘
            },
            icon2: {
                normal: ‘static/daohang/gondanNo.png‘,
                active: ‘static/daohang/gondan.png‘
            },
            icon3: {
                normal: ‘static/daohang/wodeNo.png‘,
                active: ‘static/daohang/wode.png‘
            },

        }
    },
    created(){
        // 组件创建完后获取数据，
        // 此时 data 已经被 observed 了
    },
    mounted() {
        this.fetchData()
    },
    methods:{
        fetchData () {
            // 此方式浏览器刷新会跳转到首页
        /*    var cur_path = this.$route.query.active; //获取当前路由
            // console.log(cur_path)
            let activechoose=cur_path;
            // console.log(activechoose)
            if(activechoose===0){//事件工单选中
                this.active=0;
            }else if(activechoose===1){//实时数据
                this.active=1;
            }else if(activechoose===2){//工单选中
                this.active=2
            }else if(activechoose===3){//我的选中
                this.active=3
            }*/
            // 判断当前页面是那个页面  此方式浏览器刷新还是当前页
            const CURRENTTABBAR = window.location.hash.split(‘/‘)[2]//从第二个/分割
            console.log(CURRENTTABBAR)
            if (CURRENTTABBAR === ‘home?active=0‘||CURRENTTABBAR === ‘yyindex‘) {
                this.active = 0
            } else if (CURRENTTABBAR === ‘RealTimeData?active=1‘) {
                this.active = 1
            }else if (CURRENTTABBAR === ‘EventSheet?active=2‘) {
                this.active = 2
            }else if (CURRENTTABBAR === ‘mine?active=3‘) {
                this.active = 3
            }
        }
    },

    watch: {
        ‘$route‘: ‘fetchData‘
    },
}
</script>


<style lang="less">
#gkbottomBarVTwo{
    width:100%;
    height:100%;
    bottom: 0;
    .van-tabbar--fixed{
        height: 50px;
        background-color:#fff !important;
        color: #a5a7a7;
        &:after{
            width: 0;
        }
        box-shadow: 0px -1px 4px 0px #c4c4c4;
    }
    .van-tabbar-item.van-tabbar-item--active {
        color: #42a6fe;
        .van-tabbar-item{color: #42a6fe;}
    }
    .van-tabbar-item{color: #8c9aaf;}
}
</style>

vue vant解决浏览器刷新导航栏跳转至首页的两个方法