fix: qiankun支持多页签keepalive

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

@@ -3,7 +3,7 @@
         main
         <FTabs v-model="activeKey">
             <FTabPane name="Tab 1" value="1">
-                <MicroAppWithMemoHistory key="1" name="app1" url="/app1" />
+                <MicroAppWithMemoHistory key="1" name="app1" url="/app1" a="1" />
             </FTabPane>
             <FTabPane name="Tab 2" value="2">
                 <MicroAppWithMemoHistory key="2" name="app1" url="/app1/test" />

packages/fes-plugin-qiankun/package.json

@@ -32,7 +32,7 @@
     "@fesjs/utils": "^2.0.4",
     "address": "^1.1.2",
     "lodash-es": "^4.17.15",
-    "qiankun": "^2.4.4"
+    "qiankun": "^2.7.0"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5"

packages/fes-plugin-qiankun/src/constants.js

@@ -1,3 +1,4 @@
+export const defaultMainRootId = 'root-master';
 export const defaultHistoryType = 'hash';
 export const qiankunStateForMicroModelNamespace = 'qiankunStateForMicro';
 export const qiankunStateFromMainModelNamespace = 'qiankunStateFromMain';

packages/fes-plugin-qiankun/src/main/index.js

@@ -2,6 +2,7 @@ import { readFileSync, existsSync } from 'fs';
 import { join } from 'path';
 import { resolvePkg } from '@fesjs/utils';
 import {
+    defaultMainRootId,
     defaultHistoryType,
     qiankunStateForMicroModelNamespace
 } from '../constants';
@@ -25,6 +26,12 @@ export default function (api) {
         enableBy: () => isMasterEnable(api)
     });
 
+    // 避免跟子应用冲突
+    api.modifyDefaultConfig(config => ({
+        ...config,
+        mountElementId: defaultMainRootId
+    }));
+
     modifyRoutes({ api, namespace });
 
     const absMicroAppPath = join(namespace, 'MicroApp.js');

packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl

@@ -11,26 +11,26 @@ import { loadMicroApp } from "{{{QIANKUN}}}";
 import {mergeWith} from "{{{LODASH_ES}}}";
 // eslint-disable-next-line import/extensions
 import { getMasterOptions } from "./masterOptions";
-import { onBeforeRouteLeave } from "@@/core/coreExports";
 
-async function unmountMicroApp(microApp) {
-    if (microApp) {
-        const status = microApp.getStatus();
-        if(status === 'MOUNTED'){
-          await microApp.unmount();
-        }
+function unmountMicroApp(microApp) {
+    if (!microApp) {
+        return;
+    }
+    const status = microApp.getStatus();
+    if (status === 'MOUNTED') {
+        microApp.unmount();
     }
-    return Promise.resolve();
 }
 
 export const MicroApp = defineComponent({
     props: {
         name: {
             type: String,
-            required: true,
+            required: true
         },
         settings: Object,
-        lifeCycles: Object,
+        props: Object,
+        lifeCycles: Object
     },
     setup(props, { attrs }) {
         const {
@@ -40,8 +40,6 @@ export const MicroApp = defineComponent({
             ...globalSettings
         } = getMasterOptions();
 
-        const stateForSlave = reactive({});
-
         // 挂载节点
         const containerRef = ref(null);
         const microAppRef = ref();
@@ -68,6 +66,14 @@ export const MicroApp = defineComponent({
 
         const propsFromParams = attrs;
 
+        const propsConfigRef = computed(() => {
+            return {
+                ...propsFromConfigRef.value,
+                ...props.props,
+                ...propsFromParams
+            };
+        });
+
         // 只有当name变化时才重新加载新的子应用
         const loadApp = () => {
             const appConfig = appConfigRef.value;
@@ -75,21 +81,21 @@ export const MicroApp = defineComponent({
             // 加载新的
             microAppRef.value = loadMicroApp(
                 {
-                    name: name,
+                    // 保证唯一
+                    name: `${name}_${Date.now()}`,
                     entry: entry,
                     container: containerRef.value,
-                    props: {
-                        ...propsFromConfigRef.value,
-                        ...stateForSlave,
-                        ...propsFromParams,
-                    },
+                    props: propsConfigRef.value
                 },
                 {
                     ...globalSettings,
-                    ...(props.settings || {}),
+                    ...(props.settings || {})
                 },
-                mergeWith({}, globalLifeCycles || {}, props.lifeCycles || {}, (v1, v2) =>
-                    concat(v1 ?? [], v2 ?? [])
+                mergeWith(
+                    {},
+                    globalLifeCycles || {},
+                    props.lifeCycles || {},
+                    (v1, v2) => concat(v1 ?? [], v2 ?? [])
                 )
             );
         };
@@ -106,9 +112,9 @@ export const MicroApp = defineComponent({
                     updatingPromiseRef.value = updatingPromiseRef.value.then(
                         () => {
                             const canUpdate = (app) =>
-                                app?.update && app.getStatus() === "MOUNTED";
+                                app?.update && app.getStatus() === 'MOUNTED';
                             if (canUpdate(microApp)) {
-                                if (process.env.NODE_ENV === "development") {
+                                if (process.env.NODE_ENV === 'development') {
                                     if (
                                         Date.now() -
                                             updatingTimestampRef.value <
@@ -127,11 +133,7 @@ export const MicroApp = defineComponent({
                                 }
 
                                 // 返回 microApp.update 形成链式调用
-                                return microApp.update({
-                                    ...propsFromConfigRef.value,
-                                    ...stateForSlave,
-                                    ...propsFromParams,
-                                });
+                                return microApp.update(propsConfigRef.value);
                             }
                         }
                     );
@@ -152,16 +154,10 @@ export const MicroApp = defineComponent({
             loadApp();
         });
 
-        onBeforeRouteLeave(async () => {
-            return await unmountMicroApp(microAppRef.value);
-        });
-
-        watch(()=>{
-            return {...{}, ...propsFromConfigRef.value, ...stateForSlave, ...propsFromParams}
-        }, () => {
+        watch(propsConfigRef, () => {
             updateApp();
         });
 
         return () => <div ref={containerRef}></div>;
-    },
+    }
 });

packages/fes-plugin-qiankun/src/main/runtime/MicroAppWithMemoHistory.tpl

@@ -15,6 +15,7 @@ export const MicroAppWithMemoHistory = defineComponent({
             required: true
         },
         settings: Object,
+        props: Object,
         lifeCycles: Object,
         url: String
     },

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

@@ -110,11 +110,7 @@ export function genUpdate() {
 export function genUnmount() {
     return async (props) => {
         const history = getHistory();
-        history.destroy();
-        if (cacheAppPromise) {
-            const app = await cacheAppPromise;
-            app.unmount();
-        }
+        history.destroy();  // 会触发app.unmount
         destroyRouter();
         const slaveRuntime = getSlaveRuntime();
         if (slaveRuntime.unmount) {