vue 导航栏选择性加载

转自:https://www.cnblogs.com/jialun-Online/p/11022784.html
亲测有用。
最近写vue项目遇到一些问题,我把导航栏组件放在了app.vue中,让他在每个页面都能显示了,但遇到了一个问题,在登录以及注册页面导航栏是不合理不允许存在的

解决方法:

公共模块的内容可以放在App.vue中
但是通常登录页面是不需要导航的，那么就需要规避登录页

这时，就可以采用keep-alive结合$route.meta来实现这个功能。keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。$route.meta则可以选择让需要的页面才展示。修改App.vue，如下：

　　　　　　

　　　　　　

复制代码
然后配置路由里面的参数

复制代码
export default new Router({
routes: [
{
path: ‘/’,
name: ‘home’,
component: Home,
meta:{
keepAlive:true//导航栏在该页面显示
}
},
{
path: ‘/login’,
name: ‘login’,
component: Login,
meta:{
keepAlive:false//导航栏在该页面不予显示
}
},
]
}]
谢谢~