后台tab页接入微应用的问题

记录在旧后台系统中嵌入微应用时，遇到的关于 tab 标签页及组件缓存的问题

页面结构

image.png image.png

这里主要功能页都将通过 main.vue 组件渲染到右侧容器中， 左侧为主菜单。每一子页被激活后，将新增tab标签。tab 标签之间切换将不更新组件内容。

原来组件渲染结构

image.png

这里iframe未被使用，所以关注点在两个路由的渲染入口， 1. tab页内容入口 2. 其他子页内容入口.

多 keep-alive 与 router-view

我们知道 keep-alive 用于维持组件状态，router-view 将作为路由匹配后的组件渲染出口.
这里将 keep-alive 和 router-view 嵌套在 tab中，将生成多组渲染出口.
如果只是从单纯渲染的角度，单一的出口既可以满足。 但单一出口的问题在于， keep-alive 对于组件缓存的处理。
实际测试会发现，单一出口时，路由切换， tab标签关闭后新增，都将维持组件的状态。 这就和我们的预期有出入了， 我们期望关闭tab标签关闭后，组件状态也被重置。这里就和keep-alive的缓存机制有关，keep-alive 将缓存包裹内的组件实例，当下次渲染时，重复使用该实例。所以keep-alive 内的组件重复渲染时，不会触发组件内的created钩子。
而多 keep-alive ， router-view 为每一tab标签独立分配组件缓存， 当该标签移除时，keep-alive也将被移除，所以组件缓存也将清除。 下次新增标签将为全新组件。

微应用引入

问题1： 原 main.vue 主容器与 mou路由 '/' 绑定，如何触发微应用加载 ？

为了尽量兼容原组件加载方式，这里微应用的加载触发，选择沿用原触发方式，只在配置已经渲染出口时做差异化处理. 这里只做简单流程梳理
路由注册以及触发流程

菜单UI加载及触发.png image.png

微应用渲染入口

这里微应用的加载，都通过手动控制，将周期钩子与微应用容器组件关联在一起
主容器入口

image.png

微应用容器

image.png
image.png

问题2: 如何渲染微应用且保持微应用状态 ?

微应用状态保持，需要基座与微应配合。
保证微应用容器在使用中不会被注销, 这里利用与原路由出口一致的设置方式

image.png

微应用内配置keep-alive

image.png

这里子应用作为微应用时将设置统一的路由前缀，类似主应用的嵌套路由组件

总结

对于这类tab标签页引入微应用的情况，
主要的问题是：
主次应用路由嵌套关系
子应用指定渲染容器
子应用的生命周期控制
子应用与原组件的兼容协同

一个简单直接的办法，可以将子应用看作一类在线动态路由组件。 而这类组件的声明周期是关注的重点.