keep-alive 的概念
keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性
操作:
1.在router中设置router的元信息meta : keepAlive:true
{
path:"/list",
component:HomeBookList,
meta: {
keepAlive: true // 需要缓存
}
}
2.在路由出口添加 keep-alive 标签
//这里需要缓存,使用keep-alive标签包裹
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
//这里不需要缓存
<router-view v-if="!$route.meta.keepAlive"></router-view>