[(29条消息) vue 动态设置keepalive缓存,手动清除缓存_@引力波的博客-CSDN博客_动态设置keepalive]
(29条消息) vue 动态设置keepalive缓存,手动清除缓存_@引力波的博客-CSDN博客_动态设置keepalive
简单说明
默认会缓存包住路由的所有内容
html
<keep-alive>
<router-view />
</keep-alive>
<keep-alive>
<router-view />
</keep-alive>
可用使用include ,缓存需要保存的路由,根据组件的name(不是route中的name。因为很多框架中,include中的名字是拿的路由中的name,因此常常将name保持一致)进行缓存。
html
<keep-alive :include="['Testxx1', 'ii']">
<router-view />
</keep-alive>
<keep-alive :include="['Testxx1', 'ii']">
<router-view />
</keep-alive>
生命周期:
- activated、deactivated
- 不被keep-alive控制不触发
js
activated() {
// 在首次挂载、
// 以及每次从缓存中被重新插入的时候调用
console.log('在首次挂载或从缓存中重新插入 2')
},
deactivated() {
// 在从 DOM 上移除、进入缓存
// 以及组件卸载时调用
console.log('在从 DOM 上移除、进入缓存 以及组件卸载时调用2')
}
activated() {
// 在首次挂载、
// 以及每次从缓存中被重新插入的时候调用
console.log('在首次挂载或从缓存中重新插入 2')
},
deactivated() {
// 在从 DOM 上移除、进入缓存
// 以及组件卸载时调用
console.log('在从 DOM 上移除、进入缓存 以及组件卸载时调用2')
}