vue3---如何在进行页面跳转后隐藏底部导航条

如何在进行页面跳转后隐藏底部导航条

方法一

使用路由

1.在要隐藏的导航条路由后面配置meta

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

2.回到App.vue组件中的tab-bar 中设置v-if

<template>
  <div class="app">
    <router-view />
    <!-- 跳转页面后隐藏底部导航条 -->
    <tab-bar v-if="!route.meta.hideTabBar" />
  </div>
</template>
<script setup>
  import { useRoute } from 'vue-router';
  import TabBar from './components/tab-bar/tabbar.vue';
  const route = useRoute();
</script>

方法二

使用css样式

要跳转的页面覆盖住底部导航条，达到隐藏效果
1.设置下面的样式到单独的common.css文件

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

2.在main.js中全局注册样式

import '@/assets/css/common.css';

3.在要跳转的页面中引入样式即可

<div class="city top-page">