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的页面显示了。
上一篇: jupyter notebook
下一篇: 易水公共组件入门教程