vue3底部导航隐藏

在Vue3中隐藏底部导航栏有几种方法可以实现。一种方法是在App.vue组件的tab-bar中使用v-if指令来判断是否隐藏底部导航栏。具体做法是在tab-bar标签上添加v-if="!route.meta.hideTabBar"，然后在script setup中导入useRoute函数并使用它来获取当前路由信息。这样，当路由的meta字段中设置了hideTabBar为true时，底部导航栏就会被隐藏起来。\[1\]

另一种方法是使用CSS样式来隐藏底部导航栏。在需要隐藏导航栏的路由后面配置meta字段，并设置hideTabBar为true。例如：

{
  path: '/city',
  component: () => import('@/views/city/city.vue'),
  meta: {
    hideTabBar: true,
  },
},

然后，在单独的common.css文件中添加以下样式：

.top-page {
  position: relative;
  z-index: 9;
  height: 100vh;
  background-color: #fff;
  overflow-y: auto;
}

这样，当跳转到具有hideTabBar为true的路由时，底部导航栏会被覆盖住，达到隐藏的效果。\[2\]\[3\]
#### 引用[.reference_title]
- *1* *2* *3* [vue3---如何在进行页面跳转后隐藏底部导航条](https://blog.csdn.net/weixin_65402230/article/details/126852059)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]