qiankun + vue 中使用 keep-alive 维持微应用实例

image.png

背景

qiankun + vue2.6 + element-ui, 通过标签却换不同功能， 当前一个子应用下可以对应多个功能, 及 存在统一应用下切换，跨应用切换。 当前已通过路由嵌套实现子应用独立管理各自路由，主应用负责跨应该路由切换。子应用使用手动加载。

目的

• 同时维持多个子应用实例
• 应用切换不丢失
• 加载失败时，可二次重载
• 需要同时维持多个子应用实例
• 子应用加载成功后切换不丢失
• 子应用加载失败后可重载

问题

• 手动加载子应用失败后，二次加载乾坤未重载的应用
• 子应用切换后将丢失，造成多次需要重复加载
• 初始加载时间过长

主要的目的是尽量减少子应用的二次加载，避免资源的重复请求.

方案

触发重载

image.png

加载失败后，我们需要用户再次开启功能时，进行重载。 而qiankun当前对统一子应用做的缓存处理，首先需要触发qiankun 重载。参考 这里在构建配置文件时，为请求地址添加一个更新编号, 当需要重载时，更新该编号， 再次手动加载时，将触发子应用的二次加载.

维持实例

这里通过keep-alive 保存我们子应用实例。需要解决的问题是，当应用加载失败时， 我们需要通知keep-alive 排除之前保存的实例对象。 所以需要设置 exclude 属性. 加载子应用时，监听加载结果。成功： exclude 组件名出栈, 失败：exclude 组件名入栈.

image.png

image.png

image.png

需要注意的是， keep-alive 是通过组件名称判断缓存的， 所以在加载前，我们需要先为每个子应用分配独立的组件并注册到容器组件中.