导航栏在部分页面显示，部分页面不显示的方法

无·糖

于 2024-02-19 14:30:39 发布

阅读量1.5k

点赞数 34

分类专栏： Vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_58648235/article/details/129789878

版权

Vue 专栏收录该内容

13 篇文章

订阅专栏

文章讲述了如何在Vue项目中使用路由的meta标签和`keepAlive`属性，实现导航栏在部分需要保持状态的页面（如登录后）显示，其他页面不显示的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航栏在部分页面显示，部分页面不显示的方法

可以通过路由的meta标签来判断哪些页面需要导航栏，哪些页面不需要导航栏。

APP.vue中：

<template>
  <div id="app">
    <div v-if="$route.meta.keepAlive">			//需要导航栏的页面
        <navTop></navTop>
        <router-view></router-view>
    </div>
    <div v-if="!$route.meta.keepAlive">			//不需要导航栏的页面
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
import navTop from '@/components/common/nav.vue';
export default {
  name:"commonNav",
  components:{
     navTop
  }
}
</script>

router.js中：

{
      path: '/login',
      name:　"Login",
      component: Login,
      meta: {
        keepAlive: true			//keepAlive这个字段是可以随意更改的
      }
},

这样，导航栏就只会在你设置keepAlive属性值为true的页面显示了。