@micro-zoe/micro-app 1.0.0-beta.3 → 1.0.0-beta.4

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-beta.3';
+const version = '1.0.0-beta.4';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -3705,31 +3705,41 @@ function patchWindowEffect(appName, microAppWindow) {
 
 // set micro app state to origin state
 function setMicroState(appName, microState) {
-    const rawState = globalEnv.rawWindow.history.state;
-    const additionalState = {
-        microAppState: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.microAppState, {
-            [appName]: microState
-        })
-    };
-    // create new state object
-    return assign({}, rawState, additionalState);
+    if (isMemoryRouterEnabled(appName)) {
+        const rawState = globalEnv.rawWindow.history.state;
+        const additionalState = {
+            microAppState: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.microAppState, {
+                [appName]: microState
+            })
+        };
+        // create new state object
+        return assign({}, rawState, additionalState);
+    }
+    return microState;
 }
 // delete micro app state form origin state
 function removeMicroState(appName, rawState) {
-    if (isPlainObject(rawState === null || rawState === void 0 ? void 0 : rawState.microAppState)) {
-        if (!isUndefined(rawState.microAppState[appName])) {
-            delete rawState.microAppState[appName];
-        }
-        if (!Object.keys(rawState.microAppState).length) {
-            delete rawState.microAppState;
+    if (isMemoryRouterEnabled(appName)) {
+        if (isPlainObject(rawState === null || rawState === void 0 ? void 0 : rawState.microAppState)) {
+            if (!isUndefined(rawState.microAppState[appName])) {
+                delete rawState.microAppState[appName];
+            }
+            if (!Object.keys(rawState.microAppState).length) {
+                delete rawState.microAppState;
+            }
         }
+        return assign({}, rawState);
     }
-    return assign({}, rawState);
+    return rawState;
 }
 // get micro app state form origin state
 function getMicroState(appName) {
-    var _a, _b;
-    return ((_b = (_a = globalEnv.rawWindow.history.state) === null || _a === void 0 ? void 0 : _a.microAppState) === null || _b === void 0 ? void 0 : _b[appName]) || null;
+    var _a;
+    const rawState = globalEnv.rawWindow.history.state;
+    if (isMemoryRouterEnabled(appName)) {
+        return ((_a = rawState === null || rawState === void 0 ? void 0 : rawState.microAppState) === null || _a === void 0 ? void 0 : _a[appName]) || null;
+    }
+    return rawState;
 }
 const ENC_AD_RE = /&/g; // %M1
 const ENC_EQ_RE = /=/g; // %M2
@@ -3767,53 +3777,61 @@ function formatQueryAppName(appName) {
 function getMicroPathFromURL(appName) {
     var _a, _b;
     const rawLocation = globalEnv.rawWindow.location;
-    const queryObject = getQueryObjectFromURL(rawLocation.search, rawLocation.hash);
-    const microPath = ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) || ((_b = queryObject.searchQuery) === null || _b === void 0 ? void 0 : _b[formatQueryAppName(appName)]);
-    return isString(microPath) ? decodeMicroPath(microPath) : null;
+    if (isMemoryRouterEnabled(appName)) {
+        const queryObject = getQueryObjectFromURL(rawLocation.search, rawLocation.hash);
+        const microPath = ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) || ((_b = queryObject.searchQuery) === null || _b === void 0 ? void 0 : _b[formatQueryAppName(appName)]);
+        return isString(microPath) ? decodeMicroPath(microPath) : null;
+    }
+    return rawLocation.pathname + rawLocation.search + rawLocation.hash;
 }
 /**
  * Attach child app fullPath to browser url
  * @param appName app.name
- * @param microLocation location of child app
+ * @param targetLocation location of child app or rawLocation of window
  */
-function setMicroPathToURL(appName, microLocation) {
-    let { pathname, search, hash } = globalEnv.rawWindow.location;
-    const queryObject = getQueryObjectFromURL(search, hash);
-    const encodedMicroPath = encodeMicroPath(microLocation.pathname +
-        microLocation.search +
-        microLocation.hash);
-    /**
-     * Is parent is hash router
-     * In fact, this is not true. It just means that the parameter is added to the hash
-     */
+function setMicroPathToURL(appName, targetLocation) {
+    const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
     let isAttach2Hash = false;
-    // If hash exists and search does not exist, it is considered as a hash route
-    if (hash && !search) {
-        isAttach2Hash = true;
-        if (queryObject.hashQuery) {
-            queryObject.hashQuery[formatQueryAppName(appName)] = encodedMicroPath;
-        }
-        else {
-            queryObject.hashQuery = {
-                [formatQueryAppName(appName)]: encodedMicroPath
-            };
-        }
-        const baseHash = hash.includes('?') ? hash.slice(0, hash.indexOf('?') + 1) : hash + '?';
-        hash = baseHash + stringifyQuery(queryObject.hashQuery);
-    }
-    else {
-        if (queryObject.searchQuery) {
-            queryObject.searchQuery[formatQueryAppName(appName)] = encodedMicroPath;
+    if (isMemoryRouterEnabled(appName)) {
+        let { pathname, search, hash } = globalEnv.rawWindow.location;
+        const queryObject = getQueryObjectFromURL(search, hash);
+        const encodedMicroPath = encodeMicroPath(targetFullPath);
+        /**
+         * Is parent is hash router
+         * In fact, this is not true. It just means that the parameter is added to the hash
+         */
+        // If hash exists and search does not exist, it is considered as a hash route
+        if (hash && !search) {
+            isAttach2Hash = true;
+            if (queryObject.hashQuery) {
+                queryObject.hashQuery[formatQueryAppName(appName)] = encodedMicroPath;
+            }
+            else {
+                queryObject.hashQuery = {
+                    [formatQueryAppName(appName)]: encodedMicroPath
+                };
+            }
+            const baseHash = hash.includes('?') ? hash.slice(0, hash.indexOf('?') + 1) : hash + '?';
+            hash = baseHash + stringifyQuery(queryObject.hashQuery);
         }
         else {
-            queryObject.searchQuery = {
-                [formatQueryAppName(appName)]: encodedMicroPath
-            };
+            if (queryObject.searchQuery) {
+                queryObject.searchQuery[formatQueryAppName(appName)] = encodedMicroPath;
+            }
+            else {
+                queryObject.searchQuery = {
+                    [formatQueryAppName(appName)]: encodedMicroPath
+                };
+            }
+            search = '?' + stringifyQuery(queryObject.searchQuery);
         }
-        search = '?' + stringifyQuery(queryObject.searchQuery);
+        return {
+            fullPath: pathname + search + hash,
+            isAttach2Hash,
+        };
     }
     return {
-        fullPath: pathname + search + hash,
+        fullPath: targetFullPath,
         isAttach2Hash,
     };
 }
@@ -3825,18 +3843,20 @@ function setMicroPathToURL(appName, microLocation) {
 function removeMicroPathFromURL(appName, targetLocation) {
     var _a, _b, _c, _d;
     let { pathname, search, hash } = targetLocation || globalEnv.rawWindow.location;
-    const queryObject = getQueryObjectFromURL(search, hash);
     let isAttach2Hash = false;
-    if ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) {
-        isAttach2Hash = true;
-        (_b = queryObject.hashQuery) === null || _b === void 0 ? true : delete _b[formatQueryAppName(appName)];
-        const hashQueryStr = stringifyQuery(queryObject.hashQuery);
-        hash = hash.slice(0, hash.indexOf('?') + Number(Boolean(hashQueryStr))) + hashQueryStr;
-    }
-    else if ((_c = queryObject.searchQuery) === null || _c === void 0 ? void 0 : _c[formatQueryAppName(appName)]) {
-        (_d = queryObject.searchQuery) === null || _d === void 0 ? true : delete _d[formatQueryAppName(appName)];
-        const searchQueryStr = stringifyQuery(queryObject.searchQuery);
-        search = searchQueryStr ? '?' + searchQueryStr : '';
+    if (isMemoryRouterEnabled(appName)) {
+        const queryObject = getQueryObjectFromURL(search, hash);
+        if ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) {
+            isAttach2Hash = true;
+            (_b = queryObject.hashQuery) === null || _b === void 0 ? true : delete _b[formatQueryAppName(appName)];
+            const hashQueryStr = stringifyQuery(queryObject.hashQuery);
+            hash = hash.slice(0, hash.indexOf('?') + Number(Boolean(hashQueryStr))) + hashQueryStr;
+        }
+        else if ((_c = queryObject.searchQuery) === null || _c === void 0 ? void 0 : _c[formatQueryAppName(appName)]) {
+            (_d = queryObject.searchQuery) === null || _d === void 0 ? true : delete _d[formatQueryAppName(appName)];
+            const searchQueryStr = stringifyQuery(queryObject.searchQuery);
+            search = searchQueryStr ? '?' + searchQueryStr : '';
+        }
     }
     return {
         fullPath: pathname + search + hash,
@@ -3876,7 +3896,23 @@ function getNoHashMicroPathFromURL(appName, baseUrl) {
  */
 function isEffectiveApp(appName) {
     const app = appInstanceMap.get(appName);
-    return !!(app && !app.isPrefetch && !app.isHidden());
+    /**
+     * !!(app && !app.isPrefetch && !app.isHidden())
+     * 隐藏的keep-alive应用暂时不作为无效应用，原因如下
+     * 1、隐藏后才执行去除浏览器上的微应用的路由信息的操作，导致微应用的路由信息无法去除
+     * 2、如果保持隐藏应用内部正常跳转，阻止同步路由信息到浏览器，这样理论上是好的，但是对于location跳转改如何处理？location跳转是基于修改浏览器地址后发送popstate事件实现的，所以应该是在隐藏后不支持通过location进行跳转
+     */
+    return !!(app && !app.isPrefetch);
+}
+/**
+ * Determine whether the app has enabled memory-router
+ * NOTE:
+ *  1. if sandbox disabled, memory-router is disabled
+ *  2. if app not exist, memory-router is disabled
+ */
+function isMemoryRouterEnabled(appName) {
+    const app = appInstanceMap.get(appName);
+    return !!(app && app.sandBox && app.useMemoryRouter);
 }
 
 /**
@@ -3899,26 +3935,7 @@ function addHistoryListener(appName) {
             excludePreRender: true,
         }).includes(appName) &&
             !e.onlyForBrowser) {
-            const microPath = getMicroPathFromURL(appName);
-            const app = appInstanceMap.get(appName);
-            const proxyWindow = app.sandBox.proxyWindow;
-            const microAppWindow = app.sandBox.microAppWindow;
-            let isHashChange = false;
-            // for hashChangeEvent
-            const oldHref = proxyWindow.location.href;
-            // Do not attach micro state to url when microPath is empty
-            if (microPath) {
-                const oldHash = proxyWindow.location.hash;
-                updateMicroLocation(appName, microPath, microAppWindow.location);
-                isHashChange = proxyWindow.location.hash !== oldHash;
-            }
-            // dispatch formatted popStateEvent to child
-            dispatchPopStateEventToMicroApp(appName, proxyWindow, microAppWindow);
-            // dispatch formatted hashChangeEvent to child when hash change
-            if (isHashChange)
-                dispatchHashChangeEventToMicroApp(appName, proxyWindow, microAppWindow, oldHref);
-            // clear element scope before trigger event of next app
-            removeDomScope();
+            updateMicroLocationWithEvent(appName, getMicroPathFromURL(appName));
         }
     };
     rawWindow.addEventListener('popstate', popStateHandler);
@@ -3926,6 +3943,35 @@ function addHistoryListener(appName) {
         rawWindow.removeEventListener('popstate', popStateHandler);
     };
 }
+/**
+ * Effect: use to trigger child app jump
+ * Actions:
+ *  1. update microLocation with target path
+ *  2. dispatch popStateEvent & hashChangeEvent
+ * @param appName app name
+ * @param targetFullPath target path of child app
+ */
+function updateMicroLocationWithEvent(appName, targetFullPath) {
+    const app = appInstanceMap.get(appName);
+    const proxyWindow = app.sandBox.proxyWindow;
+    const microAppWindow = app.sandBox.microAppWindow;
+    let isHashChange = false;
+    // for hashChangeEvent
+    const oldHref = proxyWindow.location.href;
+    // Do not attach micro state to url when targetFullPath is empty
+    if (targetFullPath) {
+        const oldHash = proxyWindow.location.hash;
+        updateMicroLocation(appName, targetFullPath, microAppWindow.location);
+        isHashChange = proxyWindow.location.hash !== oldHash;
+    }
+    // dispatch formatted popStateEvent to child
+    dispatchPopStateEventToMicroApp(appName, proxyWindow, microAppWindow);
+    // dispatch formatted hashChangeEvent to child when hash change
+    if (isHashChange)
+        dispatchHashChangeEventToMicroApp(appName, proxyWindow, microAppWindow, oldHref);
+    // clear element scope before trigger event of next app
+    removeDomScope();
+}
 /**
  * dispatch formatted popstate event to microApp
  * @param appName app name
@@ -4088,6 +4134,8 @@ function nativeHistoryNavigate(appName, methodName, fullPath, state = null, titl
  * 2. proxyHistory.pushState/replaceState with limited popstateEvent
  * 3. api microApp.router.push/replace
  * 4. proxyLocation.hash = xxx
+ * NOTE:
+ *  1. hidden keep-alive app can jump internally, but will not synchronize to browser
  * @param appName app.name
  * @param methodName pushState/replaceState
  * @param result result of add/remove microApp path on browser url
@@ -4103,8 +4151,10 @@ function navigateWithNativeEvent(appName, methodName, result, onlyForBrowser, st
         const oldHref = result.isAttach2Hash && oldFullPath !== result.fullPath ? rawLocation.href : null;
         // navigate with native history method
         nativeHistoryNavigate(appName, methodName, result.fullPath, state, title);
-        if (oldFullPath !== result.fullPath)
+        // TODO: 如果所有模式统一发送popstate事件，则isMemoryRouterEnabled(appName)要去掉
+        if (oldFullPath !== result.fullPath && isMemoryRouterEnabled(appName)) {
             dispatchNativeEvent(appName, onlyForBrowser, oldHref);
+        }
     }
 }
 /**
@@ -4149,8 +4199,8 @@ function reWriteHistoryMethod(method) {
             excludeHiddenApp: true,
             excludePreRender: true,
         }).forEach(appName => {
-            const app = appInstanceMap.get(appName);
-            if (app.sandBox && app.useMemoryRouter && !getMicroPathFromURL(appName)) {
+            if (isMemoryRouterEnabled(appName) && !getMicroPathFromURL(appName)) {
+                const app = appInstanceMap.get(appName);
                 attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
             }
         });
@@ -4199,12 +4249,14 @@ function createRouterApi() {
         return function (to) {
             const appName = formatAppName(to.name);
             if (appName && isString(to.path)) {
-                const app = appInstanceMap.get(appName);
-                if (app && (!app.sandBox || !app.useMemoryRouter)) {
-                    return logError(`navigation failed, memory router of app ${appName} is closed`);
-                }
-                // active apps, include hidden keep-alive app
-                if (getActiveApps({ excludePreRender: true }).includes(appName)) {
+                /**
+                 * active apps, exclude prerender app or hidden keep-alive app
+                 * NOTE:
+                 *  1. prerender app or hidden keep-alive app clear and record popstate event, so we cannot control app jump through the API
+                 *  2. disable memory-router
+                 */
+                if (getActiveApps({ excludeHiddenApp: true, excludePreRender: true }).includes(appName)) {
+                    const app = appInstanceMap.get(appName);
                     const microLocation = app.sandBox.proxyWindow.location;
                     const targetLocation = createURL(to.path, microLocation.href);
                     // Only get path data, even if the origin is different from microApp
@@ -4213,20 +4265,48 @@ function createRouterApi() {
                     if (currentFullPath !== targetFullPath || getMicroPathFromURL(appName) !== targetFullPath) {
                         const methodName = (replace && to.replace !== false) || to.replace === true ? 'replaceState' : 'pushState';
                         navigateWithRawHistory(appName, methodName, targetLocation, to.state);
+                        /**
+                         * TODO:
+                         *  1. 关闭虚拟路由的跳转地址不同：baseRoute + 子应用地址，文档中要说明
+                         *  2. 关闭虚拟路由时跳转方式不同：1、基座跳转但不发送popstate事件 2、控制子应用更新location，内部发送popstate事件。
+                         * 补充：
+                         *  核心思路：减小对基座的影响(就是子应用跳转不向基座发送popstate事件，其他操作一致)，但这是必要的吗，只是多了一个触发popstate的操作
+                         *  未来的思路有两种：
+                         *    1、减少对基座的影响，主要是解决vue循环刷新的问题
+                         *    2、全局发送popstate事件，解决主、子都是vue3的冲突问题
+                         *  两者选一个吧，如果选2，则下面这两行代码可以去掉
+                         *  要不这样吧，history和search模式采用2，这样可以解决vue3的问题，custom采用1，避免vue循环刷新的问题，这样在用户出现问题时各有解决方案。但反过来说，每种方案又分别导致另外的问题，不统一，导致复杂度增高
+                         *  如果关闭虚拟路由，同时发送popstate事件还是无法解决vue3的问题(毕竟history.state理论上还是会冲突)，那么就没必要发送popstate事件了。
+                         * 。。。。先这样吧
+                         */
+                        if (!isMemoryRouterEnabled(appName)) {
+                            updateMicroLocationWithEvent(appName, targetFullPath);
+                        }
                     }
                 }
                 else {
-                    /**
-                     * app not exit or unmounted, update browser URL with replaceState
-                     * use base app location.origin as baseURL
-                     */
-                    const rawLocation = globalEnv.rawWindow.location;
-                    const targetLocation = createURL(to.path, rawLocation.origin);
-                    const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
-                    if (getMicroPathFromURL(appName) !== targetFullPath) {
-                        navigateWithRawHistory(appName, to.replace === false ? 'pushState' : 'replaceState', targetLocation, to.state);
-                    }
+                    logWarn('navigation failed, app does not exist or is inactive');
                 }
+                // /**
+                //  * app not exit or unmounted, update browser URL with replaceState
+                //  * use base app location.origin as baseURL
+                //  * 应用不存在或已卸载，依然使用replaceState来更新浏览器地址 -- 不合理
+                //  */
+                // /**
+                //  * TODO: 应用还没渲染或已经卸载最好不要支持跳转了，我知道这是因为解决一些特殊场景，但这么做是非常反直觉的
+                //  * 并且在新版本中有多种路由模式，如果应用不存在，我们根本无法知道是哪种模式，那么这里的操作就无意义了。
+                //  */
+                // const rawLocation = globalEnv.rawWindow.location
+                // const targetLocation = createURL(to.path, rawLocation.origin)
+                // const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash
+                // if (getMicroPathFromURL(appName) !== targetFullPath) {
+                //   navigateWithRawHistory(
+                //     appName,
+                //     to.replace === false ? 'pushState' : 'replaceState',
+                //     targetLocation,
+                //     to.state,
+                //   )
+                // }
             }
             else {
                 logError(`navigation failed, name & path are required when use router.${replace ? 'replace' : 'push'}`);
@@ -4286,8 +4366,8 @@ function createRouterApi() {
      * 2. useMemoryRouter is false
      */
     function commonHandlerForAttachToURL(appName) {
-        const app = appInstanceMap.get(appName);
-        if (app.sandBox && app.useMemoryRouter) {
+        if (isMemoryRouterEnabled(appName)) {
+            const app = appInstanceMap.get(appName);
             attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
         }
     }
@@ -4539,37 +4619,40 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
         // Even if the origin is the same, developers still have the possibility of want to jump to a new page
         if (targetLocation.origin === proxyLocation.origin) {
             const setMicroPathResult = setMicroPathToURL(appName, targetLocation);
-            /**
-             * change hash with location.href will not trigger the browser reload
-             * so we use pushState & reload to imitate href behavior
-             * NOTE:
-             *    1. if child app only change hash, it should not trigger browser reload
-             *    2. if address is same and has hash, it should not add route stack
-             */
-            if (targetLocation.pathname === proxyLocation.pathname &&
-                targetLocation.search === proxyLocation.search) {
-                let oldHref = null;
-                if (targetLocation.hash !== proxyLocation.hash) {
-                    if (setMicroPathResult.isAttach2Hash)
-                        oldHref = rawLocation.href;
-                    nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
-                }
-                if (targetLocation.hash) {
-                    dispatchNativeEvent(appName, false, oldHref);
+            // if disable memory-router, navigate directly through rawLocation
+            if (isMemoryRouterEnabled(appName)) {
+                /**
+                 * change hash with location.href will not trigger the browser reload
+                 * so we use pushState & reload to imitate href behavior
+                 * NOTE:
+                 *    1. if child app only change hash, it should not trigger browser reload
+                 *    2. if address is same and has hash, it should not add route stack
+                 */
+                if (targetLocation.pathname === proxyLocation.pathname &&
+                    targetLocation.search === proxyLocation.search) {
+                    let oldHref = null;
+                    if (targetLocation.hash !== proxyLocation.hash) {
+                        if (setMicroPathResult.isAttach2Hash)
+                            oldHref = rawLocation.href;
+                        nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
+                    }
+                    if (targetLocation.hash) {
+                        dispatchNativeEvent(appName, false, oldHref);
+                    }
+                    else {
+                        reload();
+                    }
+                    return void 0;
+                    /**
+                     * when baseApp is hash router, address change of child can not reload browser
+                     * so we imitate behavior of browser (reload) manually
+                     */
                 }
-                else {
+                else if (setMicroPathResult.isAttach2Hash) {
+                    nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
                     reload();
+                    return void 0;
                 }
-                return void 0;
-                /**
-                 * when baseApp is hash router, address change of child can not reload browser
-                 * so we imitate behavior of browser (reload) manually
-                 */
-            }
-            else if (setMicroPathResult.isAttach2Hash) {
-                nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
-                reload();
-                return void 0;
             }
             return setMicroPathResult.fullPath;
         }
@@ -4661,19 +4744,34 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
                     }
                 }
                 else if (key === 'pathname') {
-                    const targetPath = ('/' + value).replace(/^\/+/, '/') + proxyLocation.search + proxyLocation.hash;
-                    handleForPathNameAndSearch(targetPath, 'pathname');
+                    if (isMemoryRouterEnabled(appName)) {
+                        const targetPath = ('/' + value).replace(/^\/+/, '/') + proxyLocation.search + proxyLocation.hash;
+                        handleForPathNameAndSearch(targetPath, 'pathname');
+                    }
+                    else {
+                        rawLocation.pathname = value;
+                    }
                 }
                 else if (key === 'search') {
-                    const targetPath = proxyLocation.pathname + ('?' + value).replace(/^\?+/, '?') + proxyLocation.hash;
-                    handleForPathNameAndSearch(targetPath, 'search');
+                    if (isMemoryRouterEnabled(appName)) {
+                        const targetPath = proxyLocation.pathname + ('?' + value).replace(/^\?+/, '?') + proxyLocation.hash;
+                        handleForPathNameAndSearch(targetPath, 'search');
+                    }
+                    else {
+                        rawLocation.search = value;
+                    }
                 }
                 else if (key === 'hash') {
-                    const targetPath = proxyLocation.pathname + proxyLocation.search + ('#' + value).replace(/^#+/, '#');
-                    const targetLocation = createURL(targetPath, url);
-                    // The same hash will not trigger popStateEvent
-                    if (targetLocation.hash !== proxyLocation.hash) {
-                        navigateWithNativeEvent(appName, 'pushState', setMicroPathToURL(appName, targetLocation), false);
+                    if (isMemoryRouterEnabled(appName)) {
+                        const targetPath = proxyLocation.pathname + proxyLocation.search + ('#' + value).replace(/^#+/, '#');
+                        const targetLocation = createURL(targetPath, url);
+                        // The same hash will not trigger popStateEvent
+                        if (targetLocation.hash !== proxyLocation.hash) {
+                            navigateWithNativeEvent(appName, 'pushState', setMicroPathToURL(appName, targetLocation), false);
+                        }
+                    }
+                    else {
+                        rawLocation.hash = value;
                     }
                 }
                 else {
@@ -4718,6 +4816,7 @@ function updateMicroLocation(appName, path, microLocation, type) {
     var _a;
     // record old values of microLocation to `from`
     const from = createGuardLocation(appName, microLocation);
+    // if is iframeSandbox, microLocation muse be rawLocation of iframe, not proxyLocation
     const newLocation = createURL(path, microLocation.href);
     if (isIframeSandbox(appName)) {
         const microAppWindow = appInstanceMap.get(appName).sandBox.microAppWindow;
@@ -4736,6 +4835,15 @@ function updateMicroLocation(appName, path, microLocation, type) {
     }
 }
 
+/**
+ * TODO: 关于关闭虚拟路由系统的临时笔记
+ * 1. with沙箱关闭虚拟路由最好和iframe保持一致
+ * 2. default-page无法使用，但是用基座的地址可以实现一样的效果
+ * 3. keep-router-state功能失效，因为始终为true
+ * 4. 基座控制子应用跳转地址改变，正确的值为：baseRoute + 子应用地址，这要在文档中说明，否则很容易出错，确实也很难理解
+ * 5. 是否需要发送popstate事件，为了减小对基座的影响，现在不发送
+ * 6. 关闭后导致的vue3路由冲突问题需要在文档中明确指出(2处：在关闭虚拟路由系统的配置那里着重说明，在vue常见问题中说明)
+ */
 /**
  * The router system has two operations: read and write
  * Read through location and write through history & location
@@ -4767,7 +4875,9 @@ function initRouteStateWithURL(appName, microLocation, defaultPage) {
 }
 /**
  * initialize browser information according to microLocation
- * called on sandbox.start or reshow of keep-alive app
+ * Scenes:
+ *  1. sandbox.start
+ *  2. reshow of keep-alive app
  */
 function updateBrowserURLWithLocation(appName, microLocation, defaultPage) {
     // update microLocation with defaultPage
@@ -4790,14 +4900,14 @@ function clearRouteStateFromURL(appName, url, microLocation, keepRouteState) {
         const { pathname, search, hash } = createURL(url);
         updateMicroLocation(appName, pathname + search + hash, microLocation, 'prevent');
     }
-    removeStateAndPathFromBrowser(appName);
+    removePathFromBrowser(appName);
     clearRouterWhenUnmount(appName);
 }
 /**
  * remove microState from history.state and remove microPath from browserURL
  * called on sandbox.stop or hidden of keep-alive app
  */
-function removeStateAndPathFromBrowser(appName) {
+function removePathFromBrowser(appName) {
     attachRouteToBrowserURL(appName, removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
 }
 
@@ -4941,6 +5051,7 @@ class WithSandBox {
         if (this.active)
             return;
         this.active = true;
+        // TODO: with沙箱关闭虚拟路由保持和iframe一致
         if (useMemoryRouter) {
             if (isUndefined(this.microAppWindow.location)) {
                 this.setMicroAppRouter(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__, this.microAppWindow);
@@ -4977,16 +5088,18 @@ class WithSandBox {
      * @param keepRouteState prevent reset route
      * @param destroy completely destroy, delete cache resources
      * @param clearData clear data from base app
+     * @param useMemoryRouter use virtual router
      */
-    stop({ umdMode, keepRouteState, destroy, clearData, }) {
+    stop({ umdMode, keepRouteState, destroy, clearData, useMemoryRouter, }) {
+        var _a;
         if (!this.active)
             return;
         this.recordAndReleaseEffect({ umdMode, clearData, destroy }, !umdMode || destroy);
-        if (this.removeHistoryListener) {
+        if (useMemoryRouter) {
             this.clearRouteState(keepRouteState);
-            // release listener of popstate
-            this.removeHistoryListener();
         }
+        // release listener of popstate for child app
+        (_a = this.removeHistoryListener) === null || _a === void 0 ? void 0 : _a.call(this);
         /**
          * NOTE:
          *  1. injectedKeys and escapeKeys must be placed at the back
@@ -5428,7 +5541,7 @@ class WithSandBox {
         updateBrowserURLWithLocation(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.location);
     }
     removeRouteInfoForKeepAliveApp() {
-        removeStateAndPathFromBrowser(this.microAppWindow.__MICRO_APP_NAME__);
+        removePathFromBrowser(this.microAppWindow.__MICRO_APP_NAME__);
     }
     /**
      * Format all html elements when init
@@ -6206,12 +6319,29 @@ class IframeSandbox {
         if (this.active)
             return;
         this.active = true;
-        if (useMemoryRouter) {
-            this.initRouteState(defaultPage);
-            // unique listener of popstate event for sub app
-            this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
-        }
-        else {
+        /**
+         * Sync router info to iframe when exec sandbox.start with disable or enable memory-router
+         * e.g.:
+         *  vue-router@4.x get target path by remove the base section from rawLocation.pathname
+         *  code: window.location.pathname.slice(base.length) || '/'; (base is baseroute)
+         * NOTE:
+         *  1. iframe router and browser router are separated, we should update iframe router manually
+         *  2. withSandbox location is browser location when disable memory-router, so no need to do anything
+         */
+        /**
+         * TODO:
+         * 做一些记录：
+         * 1. iframe关闭虚拟路由系统后，default-page无法使用，推荐用户直接使用浏览器地址控制首页渲染
+         *    补充：keep-router-state 也无法配置，因为keep-router-state一定为true。
+         * 2. 导航拦截、current.route 可以正常使用
+         * 3. 可以正常控制子应用跳转，方式还是自上而下(也可以是子应用内部跳转，这种方式更好一点，减小对基座的影响，不会导致vue的循环刷新)
+         * 4. 关闭虚拟路由以后会对应 route-mode='custom' 模式，包括with沙箱也会这么做
+         * 5. 关闭虚拟路由是指尽可能模式没有虚拟路由的情况，子应用直接获取浏览器location和history，控制浏览器跳转
+         */
+        this.initRouteState(defaultPage);
+        // unique listener of popstate event for child app
+        this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
+        if (!useMemoryRouter) {
             this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
         }
         /**
@@ -6227,15 +6357,15 @@ class IframeSandbox {
         }
         if (++IframeSandbox.activeCount === 1) ;
     }
-    stop({ umdMode, keepRouteState, destroy, clearData, }) {
+    stop({ umdMode, keepRouteState, destroy, clearData, useMemoryRouter, }) {
+        var _a;
         if (!this.active)
             return;
         this.recordAndReleaseEffect({ clearData }, !umdMode || destroy);
-        if (this.removeHistoryListener) {
-            this.clearRouteState(keepRouteState);
-            // release listener of popstate
-            this.removeHistoryListener();
-        }
+        // if keep-route-state is true or disable memory-router, preserve microLocation state
+        this.clearRouteState(keepRouteState || !useMemoryRouter);
+        // release listener of popstate for child app
+        (_a = this.removeHistoryListener) === null || _a === void 0 ? void 0 : _a.call(this);
         if (!umdMode || destroy) {
             this.deleteIframeElement();
             this.escapeKeys.forEach((key) => {
@@ -6478,7 +6608,7 @@ class IframeSandbox {
         updateBrowserURLWithLocation(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.location);
     }
     removeRouteInfoForKeepAliveApp() {
-        removeStateAndPathFromBrowser(this.microAppWindow.__MICRO_APP_NAME__);
+        removePathFromBrowser(this.microAppWindow.__MICRO_APP_NAME__);
     }
     /**
      * Format all html elements when init
@@ -6832,6 +6962,12 @@ class CreateApp {
                 (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordAndReleaseEffect({ keepAlive: true });
             }
         }
+        /**
+         * TODO: 这里增加一个处理，如果渲染完成时已经卸载，则进行一些操作
+         * 如果是默认模式：删除所有事件和定时器
+         * 如果是umd模式：重新记录和清空事件
+         * 补充：非必需，优先级低
+         */
     }
     /**
      * unmount app
@@ -6913,6 +7049,7 @@ class CreateApp {
             keepRouteState: keepRouteState && !destroy,
             destroy,
             clearData: clearData || destroy,
+            useMemoryRouter: this.useMemoryRouter,
         });
         // dispatch unmount event to base app
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
@@ -6971,6 +7108,12 @@ class CreateApp {
         dispatchLifecyclesEvent(container, this.name, lifeCycles.BEFORESHOW);
         this.setKeepAliveState(keepAliveStates.KEEP_ALIVE_SHOW);
         this.container = cloneContainer(container, this.container, false);
+        /**
+         * TODO:
+         * 1. iframe沙箱在关闭虚拟路由系统时，重新展示时不更新浏览器地址，这样和with沙箱保持一致。
+         *    但是iframe是可以做到重新展示时更新浏览器地址的，这里临时不支持，等待后续with沙箱也支持的时候再优化
+         *    只需要去除 if (this.useMemoryRouter) 的判断即可
+         */
         if (this.useMemoryRouter) {
             // called before lifeCyclesEvent
             (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.setRouteInfoForKeepAliveApp();