vue 底部导航栏显示在指定页面

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>