VUE移动端指定页面隐藏底部导航条

VUE移动端指定页面隐藏底部导航条

首页需要底部导航栏，而图片详情页则不再需要这个导航栏，而是需要另一种底部导航栏，如何隐藏App.vue呢？


利用路由元（meta）设置参数TabBarShow确定路由跳转时那个页面需要与否

var routes=[
  {
    path:'',
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home,
    meta:{
      TabBarShow: true,
    }
  },
  {
    path:'/profile',
    component:Profile,
    meta:{
      TabBarShow: true,
    }
  },
  {
    path:'/category',
    component:Category,
    meta:{
      TabBarShow: true,
    }
  },
  {
    path:'/cart',
    component:Cart,
    meta:{
      TabBarShow: false,
    }
  },
  {
    path:'/detail/:id',
    component: Detail,
    meta:{
      TabBarShow: false,
    }
  }
]

APP.vue中 给 <main-tab-bar v-if='$route.meta.TabBarShow'/> 判断是否显示

<template>
  <div id="app">
    <!-- exclude的组件，必须要有name -->
    <keep-alive exclude="Detail">
      <router-view></router-view>
    </keep-alive>
    <main-tab-bar v-if='$route.meta.TabBarShow'/>
  </div>
</template>

<script>
  import MainTabBar from '@/components/content/mainTabbar/MainTabBar.vue'
  export default {
    name:'App',
    components:{
      MainTabBar
    },
  }
</script>

<style>
@import 'assets/css/base.css';
</style>