vue设置tabbar的显示隐藏

最新推荐文章于 2024-03-07 14:37:57 发布

有衡

最新推荐文章于 2024-03-07 14:37:57 发布

阅读量2.6k

点赞数 3

分类专栏： vue

本文链接：https://blog.csdn.net/qq_44747508/article/details/105101030

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

在路由文件中设置

const routes = [{
		path: '/',
		name: 'Index',
		component: Index,
		meta: {
			showTab: true//如果需要显示就加上这个
		}
	},
	{
		path: '/Detail',
		name: 'Detail',
		component: Detail
	},
	{
		path: '/Me',
		name: 'Me',
		component: Me,
		meta: {
			showTab: true//如果需要显示就加上这个
		}
	}
]

在App.vue中的tabbar加入v-if="$route.meta.showTab"即可

<van-tabbar v-if="$route.meta.showTab" v-model="active">
	<van-tabbar-item v-for="(tab,tabIndex) in tabbar" ref="import" :key="tabIndex" :to="tab.to" :icon="tab.icon">{{tab.title}}</van-tabbar-item>
</van-tabbar>