在做項(xiàng)目時(shí)侯谁，實(shí)現(xiàn)tab頁時(shí)有tabbar锌仅，其他頁面沒有，則可以如下操作：

• 在App.vue中

<template>
  <div id="app">
     <transition :name="viewTransition">
      <router-view class="router-view" />
    </transition>
     <Tabbar v-if="tabbarShow"></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/pages/common/tabbar.vue'
export default {
  name: 'App',
  components: {
    Tabbar
  },
  // 監(jiān)聽,當(dāng)路由發(fā)生變化的時(shí)候執(zhí)行
  watch:{
    $route(to,from){
      //判斷是否顯示tabbar
      if(to.path == '/' || to.path == '/index' || to.path == '/mine'){
        this.$store.commit('updateTabbarShow',true);
      }else{
        this.$store.commit('updateTabbarShow',false);
      }

    }
 },
  computed: {
    tabbarShow(){
      return this.$store.getters.getTabbarShow
    }
  },
}
</script>

<style lang="less">

</style>

• tabbar.vue文件為

<template>
  <div class="tabbar">
      <tabbar>
        <tabbar-item selected link="/index">
          <img slot="icon" src="../../assets/images/icon.png">
          <img slot="icon-active" src="../../assets/images/active-icon.png">
          <span slot="label">首頁</span>
        </tabbar-item>
        <tabbar-item>
          <img slot="icon" src="../../assets/images/icon.png">
          <img slot="icon-active" src="../../assets/images/active-icon.png">
          <span slot="label">開莊</span>
        </tabbar-item>
        <tabbar-item >
          <img slot="icon" src="../../assets/images/icon.png">
          <img slot="icon-active" src="../../assets/images/active-icon.png">
          <span slot="label">我的投注</span>
        </tabbar-item>
        <tabbar-item link="/mine">
          <img slot="icon" src="../../assets/images/icon.png">
          <img slot="icon-active" src="../../assets/images/active-icon.png">
          <span slot="label">我的</span>
        </tabbar-item>
      </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
  components: {
    Tabbar,
    TabbarItem
  },
  data(){
    return {
    }
  },
  methods:{},
  created(){},
  mounted(){}
}
</script>
<style scoped>
</style>

• store文件夾中的index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    tabbarShow:true
  },
  getters:{
    getTabbarShow(state){
        return state.tabbarShow
    }
  },
  mutations: {
    updateTabbarShow(state, payload){
      state.tabbarShow = payload
    }
  },
  actions: {}
});

• 效果如下：

  
  
  效果圖.jpg