《JeecgBoot系列》JeecgBoot(ant-design-vue)实现表单页面缓存(keep-alive)

JeecgBoot(ant-design-vue)实现表单页面缓存(keep-alive)

一、keep-alive介绍

keep-alive是vue的一个内置实例，通过这个属性可以缓存组件的v-node，可以实现页面缓存的功能。

keep-alive有三个属性：

• 1.include：记录了哪些组件可以被缓存
• 2.exclude：记录了哪些组件不能被缓存
• 3.max：记录的是可以缓存组件的最大数量

除此之外，keep-alive还提供了两个生命周期钩子函数：

• 1.actived：在激活的时候使用，第一次激活是在mounted之后执行
• 2.dectived：在失活的时候使用

二、代码逻辑调整

2.1 调整前

在RouteView.vue文件中，keepalive定义了只能记录在includedComponents的表单可以被缓存。但是要遵守jeecgboot的命名规则。如果要实现对有表单页面缓存的话，可以调整keepalive。

注意：但是该方法只适合layouts/RouteView组件，不适合layouts/IframePageView。因为iframe页的内容不属于节点的信息，所以使用keepalive依然会重新渲染iframe的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口，即使把节点保存下来，在渲染的时候还是会刷新。

2.2 调整后

使用keep-alive标签包裹router-view就可以实现全部缓存

    <keep-alive>
      <router-view></router-view>
    </keep-alive>