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 是通过组件名称判断缓存的， 所以在加载前，我们需要先为每个子应用分配独立的组件并注册到容器组件中.
网友评论