Vue中底部tabBar切換及跳轉

 tabBar.vue文件，寫法如下：

 <div class="tab">
    <div class="tab_item" v-for="(item ,index) in tabBarImg" :key="index" @click="switchToTab(item.path)">
      <img :src="$route.path === item.path ? item.icon : item.normal" alt="">
      <span :class="$route.path === item.path ? 'active' : ''">{{item.title}}</span>
    </div>
  </div>

  tabBar.vue 中 js

export default {
    name: "Tabbar",
    data(){
      return{
        tabBarImg:[
          {
            path:'/home',
            normal:require('./../assets/img/tab_guamai_nor_icon-xhdpi.png'),
            icon:require('./../assets/img/tab_guamai_sel_icon-xhdpi.png'),
            title:'娛樂咨詢'
          },
          {
            path:'/chat',
            normal:require('./../assets/img/tab_hangqing_nor_icon-xhdpi.png'),
            icon:require('./../assets/img/tab_hangqing_sel-xhdpi.png'),
            title:'聊天'
          },
          {
            path:'/me',
            normal:require('./../assets/img/tab_wode_nor_icon-xhdpi.png'),
            icon:require('./../assets/img/tab_wode_sel_icon-xhdpi.png'),
            title:'我的'
          },
        ]
      }
    },
    methods:{
      switchToTab(path){
        console.log(path);
        this.$router.replace(path);
      }
    }
  }

 路由代碼如下：

　　meta：用來判斷底部tabbar組件是否顯示

import Vue from 'vue'
import VRouter from 'vue-router'

import Home from './../components/Home.vue';
import Chat from './../components/Chat.vue';
import Me from './../components/Me.vue';
import Login from './../components/Login.vue';


Vue.use(VRouter);

export default new VRouter({
  mode:'history',
  routes:[
    {
      path:'/home',
      component:Home,
      meta:{
        showTab:true
      }
    },
    {
      path:'/chat',
      component:Chat,
      meta:{
        showTab:true
      }
    },
    {
      path:'/me',
      component:Me,
      meta:{
        showTab:true
      }
    },
    {
      path:'/login',
      component:Login
    },
    {
      path:'/',
      redirect:'/home'
    }
  ]
})

 App.vue中，判斷 底部導航欄是否顯示

<tabbar v-if="$route.meta.showTab"></tabbar>