Vue导航栏在特定的页面不显示~
最近写vue项目遇到一些问题,我把导航栏组件放在了app.vue中,让他在每个页面都能显示了,但遇到了一个问题,在登录以及注册页面导航栏是不合理不允许存在的
解决方法:
公共模块的内容可以放在App.vue中
但是通常登录页面是不需要导航的,那么就需要规避登录页
这时,就可以采用keep-alive结合$route.meta来实现这个功能。
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。$route.meta则可以选择让需要的页面才展示。修改App.vue,如下:
<template>
<div id="app">
<div v-if="$route.meta.keepAlive">
<Nav/>
<router-view/>
</div> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template> <script> import Nav './components/Nav'//导入组件 export default { name: 'App', components:{Nav},//注册组件 } </script>
然后配置路由里面的参数
export default new Router({ routes: [ { path: '/', name: 'home', component: Home, meta:{ keepAlive:true//导航栏在该页面显示 } }, { path: '/login', name: 'login', component: Login, meta:{ keepAlive:false//导航栏在该页面不予显示 } }, ] }]
谢谢~