`qiankun` 是一款基于单 SPA 的微前端框架，它可以帮助我们轻松地将多个独立运行的
子应用集成到一个主应用中。当我们在
Vue 3 + Vite 环境下使用 `qiankun` 来加载子项目时，可以利用其核心 API —— `load
MicroApp`。
### load
MicroApp 的用法
#### 参数说明
`load
MicroApp` 函数用于动态加载指定的
子应用，并将其挂载到页面上。以下是该函数的基本语法及参数描述：
```javascript
import { load
MicroApp } from &#
39;qiankun&#
39;;
const app = load
MicroApp({
name: &#
39;subAppName&#
39;, //
子应用名称（唯一标识）
entry: &#
39;//localhost:7100&#
39;, //
子应用入口地址 (支持跨域)
container: &#
39;#container&#
39;, // 挂载容器的选择器或 DOM 元素引用，默认为 body 内的第一个 div
props: {}, // 需要传递给
子应用的数据或其他配置项
}, {
beforeLoad: [], // 加载前钩子数组
afterMount: [] // 安装完成后执行的回调
});
```
---
#### 示例代码
假设我们的主项目是一个
Vue 3 应用，采用
Vite 构建工具；而子项目则位于本地服务端口 `http://localhost:7100` 上。我们可以按照下面的方式去初始化并加载这个
子应用：
```
vue
<template>
<div id="micro-app-container"></div>
</template>
<script setup>
import { onMounted } from &#
39;
vue&#
39;;
import { register
MicroApps, start } from &#
39;qiankun&#
39;;
onMounted(() => {
const
microApp = {
name: &#
39;react-
microapp&#
39;,
entry: &#
39;//localhost:7100&#
39;,
container: &#
39;#micro-app-container&#
39;,
activeRule: &#
39;/react-subapp&#
39;
};
register
MicroApps([
microApp]);
function mount() {
return import(&#
39;qiankun&#
39;)
.then(({ load
MicroApp }) =>
load
MicroApp(
microApp)
);
}
async function init() {
await start(); // 启动 qiankun 微前端机制
console
.log("QianKun started
.");
}
init();
})
</script>
```
在上面的例子中：
- 我们通过 `register
MicroApps()` 注册了一个名为 `react-
microapp` 的
子应用；
- 使用了 `activeRule` 属性规定何时激活对应的
子应用路由规则；
- 调用了 `start()` 方法启动整个系统的生命周期管理流程。
---
#### 常见选项解释
| **属性名** | **类型** | **默认值** | **描述** |
|----------------|------------------------|------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `name` | String | - |
子应用唯一的标志符 |
| `entry` | String or Object | - |
子应用打包后的资源路径(如静态文件服务器URL) 或者模块联邦生成的对象形式 |
| `container` | Selector / HTMLElement | `document
.body` | 将
子应用插入其中的实际DOM元素选择器字符串或者直接传入DOM节点实例 |
| `props` | Object | `{}` | 可选字段，表示需要向
子应用暴露的一些全局状态或者其他上下文信息。这些数据会在
子应用内作为 props 接收到 |
此外还存在两个额外的可选参数分别是 `beforeLoad` 和 `afterMount`, 分别代表装载之前触发以及安装之后触发展示自定义逻辑的机会点。
---
###
超级会员免费看
订阅专栏 解锁全文
扫一扫
4412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
