vue3隐藏底部导航栏 关于vue3移动端底部TabBar隐藏方案方法一利用路由元信息meta设置一个开关按钮，控制底部导航的显示隐藏// router -> index.js { path: '/home', component: () => import('@/views/home/home.vue') },{ path: '/show', component: () => import('@/views/show/show.vue'), meta: { hideTabBar: true } } 在路由中添加meta，给一个布尔值控制导航栏显示隐藏// APP.vue <template> <div class="app"> <router-view /> <tab-bar v-if="!route.meta.hideTabBar"/> <!-- 因为其他页面没有设置所以最终得到的结果是undefined 他的取反结果是true，为true这个tabbar就会显示 --> </div> </template> <script setup> import TabBar from "@/components/tabbar/tabbar.vue" import { useRoute } from "vue-router"; const route = useRoute() <!-- 在script进行route.meta.hideTabBar 在写到template中数据会不响应 --> </script> <style scoped></style> 方法二通过css样式覆盖底部导航栏// 页面 <template> <div class="root">XXX</div> </ template> <style scoped lang="scss"> // 这一块代码可以封装到通用css样式文件中，随用随拿 .root { height： 100vh; // 因为我写的底部导航栏用了固定定位，所以要用相对定位，因为相对定位可以设置z-index position: relative; z-index: 9; background-color: #FFFFFF; //数据过多滚动以后还是会显示出底部导航，这一步是做到只在100vh内容区域进行滚动 overflow-y: auto; } </style> 可能底部导航栏写的不一样，效果会有偏差， 这一块是自己封装的导航栏。