vue-router中元信息meta可以用来区分哪些页面是需要显示底部导航栏的。
在需要显示底部导航栏的页面的路由上挂载meta元信息,这样在父组件里的tabbar就可以用v-if判断是否展示底部导航栏了。
路由部分代码:
{
path: "/topic",
name: "Topic",
meta: {
isShowtabbar: true,
},
component: () =>
import(/* webpackChunkName: "Cart" */ "../views/Topic.vue"),
},
{
path: "/cart",
name: "Cart",
meta: {
isShowtabbar: true,
},
component: () => import(/* webpackChunkName: "Cart" */ "../views/Cart.vue"),
},
底部导航栏的父组件部分代码:
<template>
<div id="app">
<router-view />
<tabbar v-if="$route.meta.isShowtabbar"></tabbar>//tabbar为子组件底部导航栏
</div>
</template>