test/fes.js
1
0
Fork 0
mirror of https://gitee.com/WeBank/fes.js.git synced 2024-11-30 10:48:12 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix(plugin-qiankun): 当子应用单独运行时,不执行qiankun钩子和一些qiankun的逻辑

Browse Source
This commit is contained in:
harrywan 2021-05-25 16:25:44 +08:00
parent 8444f64f10
commit 08aa7b09cb
4 changed files with 41 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/fes-plugin-qiankun/examples/app1/src/app.js
View File

@ -10,3 +10,22 @@ export const beforeRender = {
});
}
};
export const qiankun = {
// 应用加载之前
async bootstrap(props) {
console.log('app1 bootstrap', props);
},
// 应用 render 之前触发
async mount(props) {
console.log('app1 mount', props);
},
// 当 props 更新时触发
async update(props) {
console.log('app1 update', props);
},
// 应用卸载之后触发
async unmount(props) {
console.log('app1 unmount', props);
}
};

4
packages/fes-plugin-qiankun/examples/app1/src/pages/app1/test.vue
View File

@ -5,8 +5,8 @@
</template>
<config>
{
"name": "index",
"title": "home"
"name": "test",
"title": "test"
}
</config>
<script>

2
packages/fes-plugin-qiankun/examples/main/src/pages/index.vue
View File

@ -2,7 +2,7 @@
<div>
main
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="Tab 1"> <MicroAppWithMemoHistory key="1" name="app1" url="/app1" /></a-tab-pane>
<a-tab-pane key="1" tab="Tab 1"><MicroAppWithMemoHistory key="1" name="app1" url="/app1" /></a-tab-pane>
<a-tab-pane key="2" tab="Tab 2"><MicroAppWithMemoHistory key="2" name="app1" url="/app1/test" /></a-tab-pane>
<a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
</a-tabs>

37
packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl
View File

@ -38,9 +38,11 @@ function getSlaveRuntime() {
// 子应用生命周期钩子Bootstrap
export function genBootstrap(oldRender, appPromise) {
return async (props) => {
const slaveRuntime = getSlaveRuntime();
if (slaveRuntime.bootstrap) {
await slaveRuntime.bootstrap(props);
if (typeof props !== 'undefined') {
const slaveRuntime = getSlaveRuntime();
if (slaveRuntime.bootstrap) {
await slaveRuntime.bootstrap(props);
}
}
render = oldRender;
if (isPromise(appPromise)) {
@ -61,23 +63,22 @@ export function genMount(mountElementId) {
if (slaveRuntime.mount) {
await slaveRuntime.mount(props);
}
}
// 更新 clientRender 配置
const clientRenderOpts = {
// 支持通过 props 注入 container 来限定子应用 mountElementId 的查找范围
// 避免多个子应用出现在同一主应用时出现 mount 冲突
rootElement:
props?.container?.querySelector(mountElementId) || mountElementId
};
// 更新 clientRender 配置
const clientRenderOpts = {
// 支持通过 props 注入 container 来限定子应用 mountElementId 的查找范围
// 避免多个子应用出现在同一主应用时出现 mount 冲突
rootElement:
props?.container?.querySelector(mountElementId) || mountElementId
};
clientRenderOptsStack.push(clientRenderOpts);
clientRenderOptsStack.push(clientRenderOpts);
if(props.url){
history.url = props.url || '/';
}
if(props.onRouterInit){
history.onRouterInit = props.onRouterInit;
if(props.url){
history.url = props.url || '/';
}
if(props.onRouterInit){
history.onRouterInit = props.onRouterInit;
}
}
// 第一次 mount 会自动触发 render，非第一次 mount 则需手动触发