可以通过路由的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的页面显示了。