标签：结合 keepalive bsp keepaliv div efault round 实现 解决
最近写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">
</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//导航栏在该页面不予显示 } }, ] }]
谢谢~
标签：结合 keepalive bsp keepaliv div efault round 实现 解决
原文地址：https://www.cnblogs.com/jialun-Online/p/11022784.html
