解决vue中tabbar选中之后,页面跳转问题

1,602 阅读1分钟

App.vue页面

<!--使用vant组件-->
 <van-tabbar v-model="active" active-color="#22b662" 
 inactive-color="#000" @change="change">
 </van-tabbar>
 change方法监听所点击的哪个tabbar
 
  methods:{
    change(active){
    <!--active所点击的值,存储到sessionStorage中-->
      window.sessionStorage.setItem("active",active)
      // console.log(active) //active是我们所点击的索引值
    }
  },
<!--监听一下当前被点击的是哪个页面-->
<!--this.$route.path是路由自带的一种方法-->
watch:{
    $route(){
      switch(this.$route.path){
        case "/" : this.active=0
        break
        case "/cate" : this.active=1
        break
        case "/find" : this.active=2
        break
        case "/shopscar" : this.active=3
        break
        case "/mypage" : this.active=4
        break
      }
    }
created(){
<!--获取sessionStorage中的值-->
    if(!JSON.parse(window.sessionStorage.getItem("active"))){
      this.active=0
      <!--如果我们没有在sessionStorage里面找到所存储的值,
      我们就默认选中了首页-->
      return
    }
    this.active=JSON.parse(window.sessionStorage.getItem("active"))
  }