设置vue中tabbar是否显示

327 阅读1分钟

令其在详情页面不显示,在Tabbar点击的页面显示

1.在main.js中使用路由守卫和状态管理

首先在状态管理store/index.js中

export default new Vuex.Store({
  state: {
   isShow:true
  },
  mutations: {
    changeIsLoading(state,value){
      state.isShow=value
    }
  },

其次在 main.js 中
router.beforeEach(function(to,from,next){
  var pathArray = ["home","shops","mypage"]
  if(pathArray.indexOf(to.name)==-1){
    store.commit("changeIsLoading",false)
  }
  else{
    store.commit("changeIsLoading",true)
  }
  next()
})

我们将tabbar写在了App.vue中

<!--然后在页面里我们将状态管理里面的isShow得值获取一下,然后判断他是否显示-->

 computed:{
    ...mapState(["isShow"])
  }
  
  然后我就能在代码中用它了
  <div v-if="$store.state.showtabbar"> 
    ···
  </div>