Vue移动端项目实现Tarbar只在特定页面显示

在Vue移动端项目中一般Tarbar都放在入口的App.vue中，这样tarbar组件会在所有页面都显示出来。 为了解决这个问题，我们可以在使用vue-router时，在路由配置文件中，对每个路由页面加上一个meta元数据，在meta中定义一个布尔型对象，然后在tarbar组件中加上一个v-show，通过该页面对应路由meta中定义的布尔型对该页面是否显示进行控制。 代码演示

const router = new VueRouter({
    routes:[
        {path:'/',redirect: '/home',meta: { navShow: true, }},
        {path:'/home',component: Home,meta: { navShow: true, }},
        {path:'/category',component:Category,meta: { navShow: true, }},
        {path:'/cart',component:Cart,meta: { navShow: false, }},  //cart页面的meta定义了一个为false的navShow，那么在cart界面就不会显示tarbar
        {path:'/profile',component:Profile,meta: { navShow: true, }},
    ],
    mode: 'history',
})

<template>
  <div id="app">
    <router-view></router-view>
    <tabbar v-show="$route.meta.navShow"/>
  </div>
</template>