vue3 点击导航导航不消失 页面嵌入到下面

如果你使用的是 Vue3 的官方路由库 vue-router，可以在导航栏组件中监听路由变化，然后在路由变化时将导航栏隐藏。具体代码如下：

<template>
  <div class="navbar">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
  </div>
</template>

<script>
export default {
  mounted() {
    // 监听路由变化
    this.$router.afterEach(() => {
      // 隐藏导航栏
      this.hideNavbar()
    })
  },
  methods: {
    hideNavbar() {
      // 隐藏导航栏的代码
    }
  }
}
</script>

这里使用了 `$router.afterEach` 钩子来监听路由变化，每次路由变化时都会调用 `hideNavbar` 方法来隐藏导航栏。你可以根据自己的需求来实现 `hideNavbar` 方法。比如，可以使用 CSS 来隐藏导航栏：

.navbar {
  display: none;
}

.navbar.show {
  display: flex;
}

然后在 `hideNavbar` 方法中添加 `this.$el.classList.remove('show')` 来隐藏导航栏。