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" >
      <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>

原文地址：https://www.cnblogs.com/dyy-dida/p/11109689.html