欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 页面缓存 keepAlive全步骤

程序员文章站 2022-03-04 17:37:10
...

keep-alive将页面缓存起来,在切换router时不进行销毁,
vue 页面缓存 keepAlive全步骤
首先找打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("缓存状态")
    //不在当前路由,不在当前页面,离开时调用
}

vue 页面缓存 keepAlive全步骤
只要传入的为正确的值,即可进行控制

另一种写法
vue 页面缓存 keepAlive全步骤
类似,通过路由的keepAlive值进行处理,同理

相关标签: js vue