欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue导航栏/公共组件在部分页面显示,部分页面不显示

程序员文章站 2022-05-25 19:53:34
...
场景:
导航条只在除登录注册以外的页面显示;
公共组件在部分页面显示,部分页面不显示。
方法:
keep-alive结合$route.meta
代码:

APP.vue中:

<template>
  <div id="app">
    <div v-if="$route.meta.keepAlive">
        <navTop></navTop>
        <router-view></router-view>
    </div>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

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

router.js中:

  • 需要显示公共组件中keepAlive的属性值为 true,不需要显示公共组件keepAlive的属性值为flase。
{
      path: '/DeveloperDocumentation',
      name: "DeveloperDocumentation",
      component: DeveloperDocumentation,
      meta: {
        keepAlive: true
      }
},

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