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

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

页面结构

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

原来组件渲染结构

这里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也将被移除，所以组件缓存也将清除。下次新增标签将为全新组件。