vue 页面缓存 keepAlive全步骤
程序员文章站
2022-03-04 17:37:10
...
keep-alive将页面缓存起来,在切换router时不进行销毁,
首先找打router-view入口 用keep-alive将其包裹 include为白名单(即缓存白名单,需要被渲染的)这里传入的是数组,exclude:黑名单(不会被缓存),max缓存最大数量(缓存淘汰策略,见文:https://blog.csdn.net/fdl123456/article/details/97623208),传入都是数组,数组内容为每一个router-view页面的name不是路由的name,
被缓存成功的会有两个生命周期
activated(){
console.log("活跃状态");
//被**后触发,切换路由时,进入时调用
}
deactivated(){
console.log("缓存状态")
//不在当前路由,不在当前页面,离开时调用
}
只要传入的为正确的值,即可进行控制
另一种写法
类似,通过路由的keepAlive值进行处理,同理
下一篇: Vue-keepAlive按需缓存