vue移动端隐藏底部导航栏

需求

移动端在指定页面需要隐藏底部导航栏

解决方法

利用路由元（meta）设置参数

在conponents文件下导航栏组件

<template>
  <div>
    <van-tabbar route v-model="active">
      <van-tabbar-item icon="home-o" to="/home"> 首页 </van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/categorys"> 分类 </van-tabbar-item>
      <van-tabbar-item to="/shopcar" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/profile"> 个人中心 </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "TabBar",
  data() {
    return {
      active: 0,
    };
  },
};
</script>

在路由的配置中设置meta参数

TabbarShow就是控制该页面需不需要显示底部导航栏的

{
    path: '/profile',
    name: 'profile',
    component: ProfileView,
    meta: {
      TabbarShow: true  // 需要显示 底部导航
  }
  },
  {
    path: '/mypurse',
    name: 'mypurse',
    component: MyPurseView,
    meta: {
      TabbarShow: false  // 不需要显示 底部导航
  }
  },

在app.vue中使用导航栏组件，并使用v-if判断是否显示导航栏

<template>
    <div id="app">
      <router-view />

    <Tabbar v-if="$route.meta.TabbarShow"></Tabbar>
    </div>

</template>

<script>
import Tabbar from '@/components/Tabbar'
export default {
  components: { Tabbar },
  data() {
    return {
    };
  },
  methods: {},
};
</script>

profile页面有导航栏

mypurse页面没有导航栏