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

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

 

<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解决浏览器刷新导航栏跳转至首页的两个方法

上一篇:如果页面需要的数据来自于多张表中的数据,如何查询数据


下一篇:Odoo中的Environment对象