Vue中底部tabBar切换及跳转

Posted 2022-03-02 dyy-dida

 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>