主应用接入

主应用要做的事

主应用（基座）只需要两件事：注册子应用 + 启动。

最小接入

// main.js
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app-vue',              // 子应用名称，全局唯一
    entry: '//localhost:8081',    // 子应用 HTML 入口
    container: '#subapp-viewport',// 挂载容器（主应用里放一个 div）
    activeRule: '/vue',           // 激活规则：主应用路由命中时激活
    props: { authToken: 'xxx' },  // 透传给子应用的 props
  },
  {
    name: 'app-react',
    entry: '//localhost:8082',
    container: '#subapp-viewport',
    activeRule: '/react',
  },
]);

start({ prefetch: 'all' });       // 可选：预加载所有子应用

主应用 HTML 里放一个容器：

<div id="subapp-viewport"></div>

配置项说明

字段	必填	说明
name	✅	子应用唯一标识，不能重复
entry	✅	HTML 入口；开发环境是子应用 dev server 地址，生产是静态资源地址
container	✅	子应用挂载的 DOM 容器（选择器或元素）
activeRule	✅	激活规则：可以是字符串（前缀匹配）、函数（返回 boolean）、数组
props	❌	主应用传给子应用的数据，子应用在 mount(props) 里收到

activeRule 三种写法：

// 字符串：路由以 /vue 开头就激活
activeRule: '/vue'

// 函数：完全自定义
activeRule: (location) => location.pathname.startsWith('/vue')

// 数组：多个命中其一即激活
activeRule: ['/vue', '/admin']

全局生命周期钩子

registerMicroApps 的第二个参数可以挂全局钩子：

registerMicroApps(apps, {
  beforeLoad: [async (app) => console.log('加载前', app.name)],
  beforeMount: [async (app) => console.log('挂载前', app.name)],
  afterMount: [async (app) => console.log('挂载后', app.name)],
  beforeUnmount: [async (app) => console.log('卸载前', app.name)],
  afterUnmount: [async (app) => console.log('卸载后', app.name)],
});

路由的坑

• 子应用路由要基于主应用的完整路径：如果主应用是 history 路由，子应用的 base 要设成子应用自己的前缀，否则刷新会 404；
• 主应用自己也要处理"哪些路由是自己的、哪些是子应用的"，不要让主应用路由把子应用前缀也吞掉。

手动加载（不提前注册）

某些场景（子应用不固定、动态注册）可以用 loadMicroApp：

import { loadMicroApp } from 'qiankun';

const app = loadMicroApp({
  name: 'dynamic-app',
  entry: '//localhost:8083',
  container: '#dynamic-container',
});
// 需要时再 app.unmount() 手动卸载