vue3 底部导航栏不在登录页面显示

在写项目的时候，由于导航条这类组件是为了在每个页面都显示，我们放在了App.vue中，但当我们在登录页面或者注册页面时候导航栏不应该是存在的

这时候，我们可以利用 keep-alive

keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而倒是dom的重新渲染

也就是说我们利用 v-if 结合 keep-alive 实现是否展示，首先是我们的router路由

export default new Router({
  routes: [
     {
      path: '/',
      name: 'home',
      component: Home,
      meta:{
        keepAlive:true//导航栏在该页面显示
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta:{
        keepAlive:false//导航栏在该页面不显示
      }
    },
    ]
}]

然后在我们的App.vue下

<template>
  <div id="app">
  	　　<router-view/>
        <div v-if="$route.meta.keepAlive">
　　　　　　<login/>
        </div>
  </div>
</template>
 
<script>
import lonin'./components/login'//导入组件
export default {
  name: 'App',
  components:{login},//注册组件
}
</script>

这时候，login界面就不会显示了