main
+
-
+
diff --git a/packages/fes-plugin-qiankun/src/main/modifyRoutes.js b/packages/fes-plugin-qiankun/src/main/modifyRoutes.js
index 62f691d7..e785c3dd 100644
--- a/packages/fes-plugin-qiankun/src/main/modifyRoutes.js
+++ b/packages/fes-plugin-qiankun/src/main/modifyRoutes.js
@@ -2,11 +2,11 @@ import { defaultHistoryType } from '../constants';
function getMicroApp(options) {
const {
- key, microAppName, masterHistoryType, base, namespace, ...normalizedRouteProps
+ key, microAppName, cacheName, masterHistoryType, base, namespace, ...normalizedRouteProps
} = options;
return `(() => {
const { getMicroAppRouteComponent } = require('@@/${namespace}/getMicroAppRouteComponent');
-return getMicroAppRouteComponent({key: '${key}', appName: '${microAppName}', base: '${base}', masterHistoryType: '${masterHistoryType}', routeProps: ${JSON.stringify(normalizedRouteProps)} })
+return getMicroAppRouteComponent({key: '${key}', appName: '${microAppName}', cacheName: '${cacheName}', base: '${base}', masterHistoryType: '${masterHistoryType}', routeProps: ${JSON.stringify(normalizedRouteProps)} })
})()`;
}
@@ -19,6 +19,7 @@ function modifyRoutesWithAttachMode({
if (route.meta && route.meta.microApp) {
route.component = getMicroApp({
key: route.path,
+ cacheName: route.meta.cacheName ?? route.path,
microAppName: route.meta.microApp,
masterHistoryType,
base,
diff --git a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl
index 1140bdbe..30809037 100644
--- a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl
+++ b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl
@@ -12,13 +12,13 @@ import {mergeWith} from "{{{LODASH_ES}}}";
// eslint-disable-next-line import/extensions
import { getMasterOptions } from "./masterOptions";
-function unmountMicroApp(microApp) {
+async function unmountMicroApp(microApp) {
if (!microApp) {
return;
}
const status = microApp.getStatus();
if (status === 'MOUNTED') {
- microApp.unmount();
+ await microApp.unmount();
}
}
@@ -28,6 +28,7 @@ export const MicroApp = defineComponent({
type: String,
required: true
},
+ cacheName: String,
settings: Object,
props: Object,
lifeCycles: Object
@@ -64,26 +65,26 @@ export const MicroApp = defineComponent({
return {};
});
+
const propsConfigRef = computed(() => {
return {
...propsFromConfigRef.value,
...props.props,
- ...attrs
};
});
// 只有当name变化时才重新加载新的子应用
const loadApp = () => {
const appConfig = appConfigRef.value;
- const { name, entry } = appConfig;
+ const { name, cacheName } = appConfig;
// 加载新的
- microAppRef.value = loadMicroApp(
+ const app = loadMicroApp(
{
// 保证唯一
- name: `${name}_${Date.now()}`,
+ name: `${name}_${props.cacheName || ''}`,
entry: entry,
container: containerRef.value,
- props: {...propsConfigRef.value}
+ props: {...propsConfigRef.value, ...attrs}
},
{
...globalSettings,
@@ -96,6 +97,12 @@ export const MicroApp = defineComponent({
(v1, v2) => concat(v1 ?? [], v2 ?? [])
)
);
+ ['loadPromise', 'bootstrapPromise', 'mountPromise', 'unmountPromise'].forEach((key)=>{
+ app[key].catch((e)=>{
+ console.warn("[@fesjs/plugin-qiankun]", e)
+ })
+ })
+ microAppRef.value = app;
};
// 当参数变化时，update子应用
@@ -131,7 +138,7 @@ export const MicroApp = defineComponent({
}
// 返回 microApp.update 形成链式调用
- return microApp.update({...propsConfigRef.value});
+ return microApp.update({...propsConfigRef.value, ...attrs});
}
}
);
diff --git a/packages/fes-plugin-qiankun/src/main/runtime/MicroAppWithMemoHistory.tpl b/packages/fes-plugin-qiankun/src/main/runtime/MicroAppWithMemoHistory.tpl
index f14e748a..e92bb7b7 100644
--- a/packages/fes-plugin-qiankun/src/main/runtime/MicroAppWithMemoHistory.tpl
+++ b/packages/fes-plugin-qiankun/src/main/runtime/MicroAppWithMemoHistory.tpl
@@ -14,6 +14,7 @@ export const MicroAppWithMemoHistory = defineComponent({
type: String,
required: true
},
+ cacheName: String,
settings: Object,
props: Object,
lifeCycles: Object,
diff --git a/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.tpl b/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.tpl
index 074ab2cf..c338fc60 100644
--- a/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.tpl
+++ b/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.tpl
@@ -3,10 +3,11 @@ import { MicroApp } from './MicroApp';
export function getMicroAppRouteComponent({
key,
appName,
+ cacheName,
base,
masterHistoryType,
routeProps
}) {
- return ;
+ return ;
}
diff --git a/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl b/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl
index c98aed7a..48469482 100644
--- a/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl
+++ b/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl
@@ -1,4 +1,4 @@
-import { plugin, ApplyPluginsType, getRouter, getHistory, destroyRouter } from '@@/core/coreExports';
+import { plugin, ApplyPluginsType } from '@@/core/coreExports';
{{#HAS_PLUGIN_MODEL}}
import { setModelState } from './qiankunModel';
{{/HAS_PLUGIN_MODEL}}
@@ -18,6 +18,7 @@ function isPromise(obj) {
let render = () => {};
let cacheAppPromise = null;
let hasMountedAtLeastOnce = false;
+const cache = {};
export default () => defer.promise;
@@ -91,6 +92,11 @@ export function genMount(mountElementId) {
defer.resolve();
}
hasMountedAtLeastOnce = true;
+ cacheAppPromise.then((app)=>{
+ if(!cache[props.name]) {
+ cache[props.name] = app;
+ }
+ })
};
}
@@ -109,9 +115,15 @@ export function genUpdate() {
// 子应用生命周期钩子Unmount
export function genUnmount() {
return async (props) => {
- const history = getHistory();
- history.destroy(); // 会触发app.unmount
- destroyRouter();
+ if (cache[props.name]) {
+ setTimeout(() => {
+ const app = cache[props.name];
+ app.unmount();
+ app._container.innerHTML = '';
+ delete cache[props.name];
+ cacheAppPromise = null;
+ }, 0);
+ }
const slaveRuntime = getSlaveRuntime();
if (slaveRuntime.unmount) {
await slaveRuntime.unmount(props);
diff --git a/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl b/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl
index 63a0bcd1..2d620c2c 100644
--- a/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl
+++ b/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl
@@ -1,5 +1,5 @@
-import { createMemoryHistory, getHistory } from '@@/core/coreExports';
-import qiankunRender, { clientRenderOptsStack, history } from './lifecycles';
+import { createMemoryHistory } from '@@/core/coreExports';
+import qiankunRender, { clientRenderOptsStack, history as historyConfig } from './lifecycles';
export const render = oldRender => qiankunRender().then(oldRender);
@@ -15,19 +15,18 @@ export function modifyClientRenderOpts(memo) {
}
export function modifyCreateHistory(memo) {
- if (history.url) {
+ if (historyConfig.url) {
return createMemoryHistory
}
return memo;
}
-export function onRouterCreated({ router }) {
- if(history.url) {
- const memoryHistory = getHistory();
- memoryHistory.push(history.url)
+export function onRouterCreated({ router, history }) {
+ if(historyConfig.url) {
+ history.push(historyConfig.url)
}
- if(history.onRouterInit){
- history.onRouterInit(router)
+ if(historyConfig.onRouterInit){
+ historyConfig.onRouterInit(router)
}
}
diff --git a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl b/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl
index 295a50a9..b66d1b85 100644
--- a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl
+++ b/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl
@@ -61,6 +61,7 @@ const beforeRender = async ({rootElement}) => {
console.error(e);
}
app.unmount();
+ app._container.innerHTML = '';
}
return initialState;
};
diff --git a/packages/fes-preset-built-in/src/plugins/misc/route/template/routes.tpl b/packages/fes-preset-built-in/src/plugins/misc/route/template/routes.tpl
index 0a7e3cba..f130e641 100644
--- a/packages/fes-preset-built-in/src/plugins/misc/route/template/routes.tpl
+++ b/packages/fes-preset-built-in/src/plugins/misc/route/template/routes.tpl
@@ -10,9 +10,6 @@ const ROUTER_BASE = '{{{ routerBase }}}';
let router = null;
let history = null;
export const createRouter = (routes) => {
- if (router) {
- return router;
- }
const createHistory = plugin.applyPlugins({
key: 'modifyCreateHistory',
type: ApplyPluginsType.modify,
@@ -36,7 +33,7 @@ export const createRouter = (routes) => {
plugin.applyPlugins({
key: 'onRouterCreated',
type: ApplyPluginsType.event,
- args: { router },
+ args: { router, history },
});
return router;