本文介绍了如何在Vue项目中实现底部TabBar的切换和页面跳转。通过`tabBar.vue`文件展示了每个Tab的配置，包括正常状态和选中状态的图片、路径和标题。同时，提供了`switchToTab`方法用于根据路径进行页面切换。路由配置中使用了`vue-router`，定义了`Home`、`Chat`和`Me`三个组件的路由，并设置`meta`属性来控制底部TabBar的显示。
tabBar.vue文件，写法如下：
{{item.title}}
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中，判断 底部导航栏是否显示
扫一扫
1183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
