Vue 主应用中同时支持 qiankun 子应用与 iframe 子应用的加载方案

在之前的文章中，我已经介绍过如何在主应用 SubAppView.vue 中通过 qiankun 来加载微前端子应用：
👉 主应用加载 qiankun 子应用的实现方案

本文不再赘述 qiankun 部分，而是重点介绍如何在实际项目中，同时存在 qiankun 应用和 iframe 应用的混合场景，以及如何通过路由实现外链跳转。

这样，一个主应用就可以同时支持三种子应用接入方式：

• ✅ qiankun 子应用

• ✅ iframe 子应用

• ✅ 外链新窗口子系统

---

一、为什么要支持 iframe 子应用

在多数情况下，我们推荐子应用以 qiankun 微前端方式接入，主应用与子应用之间可以共享状态、无缝跳转。

但在一些场景下：

• 历史遗留系统，难以改造为微前端

• 外部第三方平台，不方便统一接入 qiankun

• 不需要和主应用深度集成，只要简单嵌入

此时 iframe 嵌入就是一个现实可行的方案。

所以，我在 SubAppView.vue 中做了扩展，能够根据不同子应用配置，动态选择：

• qiankun 模式加载子应用

• iframe 模式嵌入子系统</