码迷,mamicode.com
首页 > 其他好文 > 详细

Vue中底部tabBar切换及跳转

时间:2019-06-30 15:46:45      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:eth   component   ace   routes   rom   new   cli   import   title   

 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>

  

Vue中底部tabBar切换及跳转

标签:eth   component   ace   routes   rom   new   cli   import   title   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!