@tarojs/router 3.7.0-alpha.2 → 3.7.0-alpha.20

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { createBrowserHistory, createHashHistory, Action, parsePath } from 'history';
-import { Current, incrementId, eventCenter, createPageConfig, hooks, stringify, requestAnimationFrame } from '@tarojs/runtime';
+import { Current, eventCenter, incrementId, createPageConfig, hooks, stringify, requestAnimationFrame as requestAnimationFrame$1 } from '@tarojs/runtime';
 import MobileDetect from 'mobile-detect';
 import queryString from 'query-string';
 import { defineCustomElementTaroTabbar } from '@tarojs/components/dist/components';
@@ -31,65 +31,6 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-// export const removeLeadingSlash = (str = '') => str.replace(/^\.?\//, '')
-// export const removeTrailingSearch = (str = '') => str.replace(/\?[\s\S]*$/, '')
-const addLeadingSlash = (url = '') => (url.charAt(0) === '/' ? url : '/' + url);
-const hasBasename = (path = '', prefix = '') => new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path) || path === prefix;
-const stripBasename = (path = '', prefix = '') => hasBasename(path, prefix) ? path.substring(prefix.length) : path;
-const stripTrailing = (str = '') => str.replace(/[?#][\s\S]*$/, '');
-const getHomePage = (path = '', basename = '', customRoutes = {}, entryPagePath = '') => {
-    var _a;
-    const routePath = addLeadingSlash(stripBasename(path, basename));
-    const alias = ((_a = Object.entries(customRoutes).find(([key]) => key === routePath)) === null || _a === void 0 ? void 0 : _a[1]) || routePath;
-    return entryPagePath || (typeof alias === 'string' ? alias : alias[0]) || basename;
-};
-const getCurrentPage = (routerMode = 'hash', basename = '/') => {
-    const pagePath = routerMode === 'hash'
-        ? location.hash.slice(1).split('?')[0]
-        : location.pathname;
-    return addLeadingSlash(stripBasename(pagePath, basename));
-};
-class RoutesAlias {
-    constructor() {
-        this.conf = [];
-        this.getConfig = (url = '') => {
-            const customRoute = this.conf.filter((arr) => {
-                return arr.includes(url);
-            });
-            return customRoute[0];
-        };
-        this.getOrigin = (url = '') => {
-            var _a;
-            return ((_a = this.getConfig(url)) === null || _a === void 0 ? void 0 : _a[0]) || url;
-        };
-        this.getAlias = (url = '') => {
-            var _a;
-            return ((_a = this.getConfig(url)) === null || _a === void 0 ? void 0 : _a[1]) || url;
-        };
-        this.getAll = (url = '') => {
-            return this.conf
-                .filter((arr) => arr.includes(url))
-                .reduceRight((p, a) => {
-                p.unshift(a[1]);
-                return p;
-            }, []);
-        };
-    }
-    set(customRoutes = {}) {
-        for (let key in customRoutes) {
-            const path = customRoutes[key];
-            key = addLeadingSlash(key);
-            if (typeof path === 'string') {
-                this.conf.push([key, addLeadingSlash(path)]);
-            }
-            else if ((path === null || path === void 0 ? void 0 : path.length) > 0) {
-                this.conf.push(...path.map(p => [key, addLeadingSlash(p)]));
-            }
-        }
-    }
-}
-const routesAlias = new RoutesAlias();
-
 class RouterConfig {
     static set config(e) {
         this.__config = e;
@@ -108,7 +49,7 @@ class RouterConfig {
     }
     static get customRoutes() { return this.router.customRoutes || {}; }
     static isPage(url = '') {
-        return this.pages.findIndex(e => addLeadingSlash(e) === url) !== -1;
+        return this.pages.findIndex(e => prependBasename(e) === url) !== -1;
     }
 }
 
@@ -147,7 +88,7 @@ class MpaHistory {
         return url;
     }
     push(to, _state = {}) {
-        window.location.pathname = this.parseUrl(to);
+        window.location.assign(this.parseUrl(to));
         // this.pushState(_state, '', this.parseUrl(to))
     }
     replace(to, _state = {}) {
@@ -292,6 +233,65 @@ class Stacks {
 }
 const stacks = new Stacks();
 
+// export const removeLeadingSlash = (str = '') => str.replace(/^\.?\//, '')
+// export const removeTrailingSearch = (str = '') => str.replace(/\?[\s\S]*$/, '')
+const addLeadingSlash = (url = '') => (url.charAt(0) === '/' ? url : '/' + url);
+const hasBasename = (path = '', prefix = '') => new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path) || path === prefix;
+const stripBasename = (path = '', prefix = '') => hasBasename(path, prefix) ? path.substring(prefix.length) : path;
+const stripTrailing = (str = '') => str.replace(/[?#][\s\S]*$/, '');
+const getHomePage = (path = '', basename = '', customRoutes = {}, entryPagePath = '') => {
+    var _a;
+    const routePath = addLeadingSlash(stripBasename(path, basename));
+    const alias = ((_a = Object.entries(customRoutes).find(([key]) => key === routePath)) === null || _a === void 0 ? void 0 : _a[1]) || routePath;
+    return entryPagePath || (typeof alias === 'string' ? alias : alias[0]) || basename;
+};
+const getCurrentPage = (routerMode = 'hash', basename = '/') => {
+    const pagePath = routerMode === 'hash'
+        ? location.hash.slice(1).split('?')[0]
+        : location.pathname;
+    return addLeadingSlash(stripBasename(pagePath, basename));
+};
+class RoutesAlias {
+    constructor() {
+        this.conf = [];
+        this.getConfig = (url = '') => {
+            const customRoute = this.conf.filter((arr) => {
+                return arr.includes(url);
+            });
+            return customRoute[0];
+        };
+        this.getOrigin = (url = '') => {
+            var _a;
+            return ((_a = this.getConfig(url)) === null || _a === void 0 ? void 0 : _a[0]) || url;
+        };
+        this.getAlias = (url = '') => {
+            var _a;
+            return ((_a = this.getConfig(url)) === null || _a === void 0 ? void 0 : _a[1]) || url;
+        };
+        this.getAll = (url = '') => {
+            return this.conf
+                .filter((arr) => arr.includes(url))
+                .reduceRight((p, a) => {
+                p.unshift(a[1]);
+                return p;
+            }, []);
+        };
+    }
+    set(customRoutes = {}) {
+        for (let key in customRoutes) {
+            const path = customRoutes[key];
+            key = addLeadingSlash(key);
+            if (typeof path === 'string') {
+                this.conf.push([key, addLeadingSlash(path)]);
+            }
+            else if ((path === null || path === void 0 ? void 0 : path.length) > 0) {
+                this.conf.push(...path.map(p => [key, addLeadingSlash(p)]));
+            }
+        }
+    }
+}
+const routesAlias = new RoutesAlias();
+
 function processNavigateUrl(option) {
     var _a;
     const pathPieces = parsePath(option.url);
@@ -345,7 +345,12 @@ function navigate(option, method) {
                 }
                 else if (method === 'navigateBack') {
                     stacks.delta = option.delta;
-                    history.go(-option.delta);
+                    if (stacks.length > option.delta) {
+                        history.go(-option.delta);
+                    }
+                    else {
+                        history.go(1 - stacks.length);
+                    }
                 }
             }
             catch (error) {
@@ -430,11 +435,11 @@ function bindPageResize(page) {
 
 const pageScrollFn = {};
 let pageDOM = window;
-function bindPageScroll(page, pageEl, distance = 50) {
+function bindPageScroll(page, scrollEl, distance = 50) {
     var _a;
     const pagePath = (page ? page === null || page === void 0 ? void 0 : page.path : (_a = Current.router) === null || _a === void 0 ? void 0 : _a.path);
-    pageScrollFn[pagePath] && pageEl.removeEventListener('scroll', pageScrollFn[pagePath]);
-    pageDOM = pageEl;
+    pageScrollFn[pagePath] && scrollEl.removeEventListener('scroll', pageScrollFn[pagePath]);
+    pageDOM = scrollEl;
     let isReachBottom = false;
     pageScrollFn[pagePath] = function () {
         var _a;
@@ -462,6 +467,75 @@ function getOffset() {
     }
 }
 
+/**
+ * 插入页面动画需要的样式
+ */
+function loadAnimateStyle(ms = 300) {
+    const css = `
+.taro_router > .taro_page {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  transform: translate(100%, 0);
+  transition: transform ${ms}ms;
+  z-index: 0;
+}
+
+.taro_router > .taro_page.taro_tabbar_page,
+.taro_router > .taro_page.taro_page_show.taro_page_stationed {
+  transform: none;
+}
+
+.taro_router > .taro_page.taro_page_show {
+  transform: translate(0, 0);
+}
+
+.taro_page_shade,
+.taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
+  display: none;
+}`;
+    addStyle(css);
+}
+/**
+ * 插入路由相关样式
+ */
+function loadRouterStyle(usingWindowScroll) {
+    const css = `
+  .taro_router {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .taro_page {
+    width: 100%;
+    height: 100%;
+  ${usingWindowScroll ? '' : `
+    overflow-x: hidden;
+    overflow-y: scroll;
+    max-height: 100vh;
+  `}
+  }
+
+  .taro-tabbar__container .taro-tabbar__panel {
+    overflow: hidden;
+    max-height: calc(100vh - var(--taro-tabbar-height) - constant(safe-area-inset-bottom));
+    max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
+  }
+`;
+    addStyle(css);
+}
+function addStyle(css) {
+    if (!css)
+        return;
+    const style = document.createElement('style');
+    style.innerHTML = css;
+    document.getElementsByTagName('head')[0].appendChild(style);
+}
+
 // @ts-nocheck
 function initTabbar(config) {
     if (config.tabBar == null) {
@@ -522,6 +596,17 @@ class MultiPageHandler {
         return !!pagePath && this.tabBarList.some(t => t.pagePath === pagePath);
     }
     get search() { return location.search.substr(1); }
+    get usingWindowScroll() {
+        var _a;
+        let usingWindowScroll = true;
+        if (typeof ((_a = this.pageConfig) === null || _a === void 0 ? void 0 : _a.usingWindowScroll) === 'boolean') {
+            usingWindowScroll = this.pageConfig.usingWindowScroll;
+        }
+        const win = window;
+        win.__taroAppConfig || (win.__taroAppConfig = {});
+        win.__taroAppConfig.usingWindowScroll = usingWindowScroll;
+        return usingWindowScroll;
+    }
     getQuery(search = '', options = {}) {
         search = search ? `${search}&${this.search}` : this.search;
         const query = search
@@ -531,6 +616,7 @@ class MultiPageHandler {
     }
     mount() {
         setHistoryMode(this.routerMode, this.router.basename);
+        loadRouterStyle(this.usingWindowScroll);
         const appId = this.appId;
         let app = document.getElementById(appId);
         let isPosition = true;
@@ -567,7 +653,20 @@ class MultiPageHandler {
         const pageEl = this.getPageContainer(page);
         if (pageEl && !(pageEl === null || pageEl === void 0 ? void 0 : pageEl['__isReady'])) {
             const el = pageEl.firstElementChild;
-            (_a = el === null || el === void 0 ? void 0 : el['componentOnReady']) === null || _a === void 0 ? void 0 : _a.call(el);
+            const componentOnReady = el === null || el === void 0 ? void 0 : el['componentOnReady'];
+            if (componentOnReady) {
+                componentOnReady === null || componentOnReady === void 0 ? void 0 : componentOnReady().then(() => {
+                    requestAnimationFrame(() => {
+                        var _a;
+                        (_a = page.onReady) === null || _a === void 0 ? void 0 : _a.call(page);
+                        pageEl['__isReady'] = true;
+                    });
+                });
+            }
+            else {
+                (_a = page.onReady) === null || _a === void 0 ? void 0 : _a.call(page);
+                pageEl['__isReady'] = true;
+            }
             onLoad && (pageEl['__page'] = page);
         }
     }
@@ -577,11 +676,14 @@ class MultiPageHandler {
             return;
         (_a = page.onLoad) === null || _a === void 0 ? void 0 : _a.call(page, this.getQuery('', page.options), () => {
             var _a;
-            const pageEl = this.getPageContainer(page);
-            this.isTabBar && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
+            if (this.isTabBar) {
+                const pageEl = this.getPageContainer(page);
+                pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page');
+            }
             this.onReady(page, true);
             (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
-            this.bindPageEvents(page, pageEl, pageConfig);
+            this.bindPageEvents(page, pageConfig);
+            this.triggerRouterChange();
         });
     }
     getPageContainer(page) {
@@ -595,17 +697,33 @@ class MultiPageHandler {
             ? document.querySelector(`.taro_page#${id}`)
             : document.querySelector('.taro_page') ||
                 document.querySelector('.taro_router'));
-        return el || window;
+        return el;
     }
-    bindPageEvents(page, pageEl, config = {}) {
+    getScrollingElement(page) {
+        if (this.usingWindowScroll)
+            return window;
+        return this.getPageContainer(page) || window;
+    }
+    bindPageEvents(page, config = {}) {
         var _a;
-        if (!pageEl) {
-            pageEl = this.getPageContainer();
-        }
+        const scrollEl = this.getScrollingElement(page);
         const distance = config.onReachBottomDistance || ((_a = this.config.window) === null || _a === void 0 ? void 0 : _a.onReachBottomDistance) || 50;
-        bindPageScroll(page, pageEl, distance);
+        bindPageScroll(page, scrollEl, distance);
         bindPageResize(page);
     }
+    triggerRouterChange() {
+        /**
+         * @tarojs/runtime 中生命周期跑在 promise 中，所以这里需要 setTimeout 延迟事件调用
+         * TODO 考虑将生命周期返回 Promise，用于处理相关事件调用顺序
+         */
+        setTimeout(() => {
+            eventCenter.trigger('__afterTaroRouterChange', {
+                toLocation: {
+                    path: this.pathname
+                }
+            });
+        }, 0);
+    }
 }
 
 const createStampId$1 = incrementId();
@@ -621,6 +739,9 @@ const launchStampId$1 = createStampId$1();
 function createMultiRouter(app, config, framework) {
     var _a, _b, _c, _d, _e, _f;
     return __awaiter(this, void 0, void 0, function* () {
+        if (typeof app.onUnhandledRejection === 'function') {
+            window.addEventListener('unhandledrejection', app.onUnhandledRejection);
+        }
         RouterConfig.config = config;
         const handler = new MultiPageHandler(config);
         const launchParam = {
@@ -663,48 +784,13 @@ function createMultiRouter(app, config, framework) {
         const loadConfig = Object.assign({}, pageConfig);
         delete loadConfig['path'];
         delete loadConfig['load'];
-        const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, location.pathname, framework, handler.PullDownRefresh) : el, pathName + stringify(launchParam), {}, loadConfig);
+        const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, pathName, framework, handler.PullDownRefresh) : el, pathName + stringify(launchParam), {}, loadConfig);
         handler.load(page, pageConfig);
         (_f = app.onShow) === null || _f === void 0 ? void 0 : _f.call(app, launchParam);
     });
 }
 
-/**
- * 插入页面动画需要的样式
- */
-function loadAnimateStyle(ms = 300) {
-    const css = `
-.taro_router .taro_page {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-  transform: translate(100%, 0);
-  transition: transform ${ms}ms;
-  z-index: 0;
-}
-
-.taro_router .taro_page.taro_tabbar_page,
-.taro_router .taro_page.taro_page_show.taro_page_stationed {
-  transform: none;
-}
-
-.taro_router .taro_page.taro_page_show {
-  transform: translate(0, 0);
-}`;
-    const style = document.createElement('style');
-    style.innerHTML = css;
-    document.getElementsByTagName('head')[0].appendChild(style);
-}
-
 /* eslint-disable dot-notation */
-function setDisplay(el, type = '') {
-    if (el) {
-        el.style.display = type;
-    }
-}
 class PageHandler {
     constructor(config) {
         this.defaultAnimation = { duration: 300, delay: 50 };
@@ -784,6 +870,17 @@ class PageHandler {
         }
         return search.substring(1);
     }
+    get usingWindowScroll() {
+        var _a;
+        let usingWindowScroll = false;
+        if (typeof ((_a = this.pageConfig) === null || _a === void 0 ? void 0 : _a.usingWindowScroll) === 'boolean') {
+            usingWindowScroll = this.pageConfig.usingWindowScroll;
+        }
+        const win = window;
+        win.__taroAppConfig || (win.__taroAppConfig = {});
+        win.__taroAppConfig.usingWindowScroll = usingWindowScroll;
+        return usingWindowScroll;
+    }
     getQuery(stamp = '', search = '', options = {}) {
         search = search ? `${search}&${this.search}` : this.search;
         const query = search
@@ -794,7 +891,9 @@ class PageHandler {
     }
     mount() {
         setHistoryMode(this.routerMode, this.router.basename);
+        this.pathname = history.location.pathname;
         this.animation && loadAnimateStyle(this.animationDuration);
+        loadRouterStyle(this.usingWindowScroll);
         const appId = this.appId;
         let app = document.getElementById(appId);
         let isPosition = true;
@@ -834,7 +933,7 @@ class PageHandler {
             const componentOnReady = el === null || el === void 0 ? void 0 : el['componentOnReady'];
             if (componentOnReady) {
                 componentOnReady === null || componentOnReady === void 0 ? void 0 : componentOnReady().then(() => {
-                    requestAnimationFrame(() => {
+                    requestAnimationFrame$1(() => {
                         var _a;
                         (_a = page.onReady) === null || _a === void 0 ? void 0 : _a.call(page);
                         pageEl['__isReady'] = true;
@@ -857,11 +956,12 @@ class PageHandler {
         const param = this.getQuery(stampId, '', page.options);
         let pageEl = this.getPageContainer(page);
         if (pageEl) {
-            setDisplay(pageEl);
+            pageEl.classList.remove('taro_page_shade');
             this.isTabBar(this.pathname) && pageEl.classList.add('taro_tabbar_page');
             this.addAnimation(pageEl, pageNo === 0);
             (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
-            this.bindPageEvents(page, pageEl, pageConfig);
+            this.bindPageEvents(page, pageConfig);
+            this.triggerRouterChange();
         }
         else {
             (_b = page.onLoad) === null || _b === void 0 ? void 0 : _b.call(page, param, () => {
@@ -871,7 +971,8 @@ class PageHandler {
                 this.addAnimation(pageEl, pageNo === 0);
                 this.onReady(page, true);
                 (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
-                this.bindPageEvents(page, pageEl, pageConfig);
+                this.bindPageEvents(page, pageConfig);
+                this.triggerRouterChange();
             });
         }
     }
@@ -891,10 +992,14 @@ class PageHandler {
             const pageEl = this.getPageContainer(page);
             pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.remove('taro_page_stationed');
             pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.remove('taro_page_show');
+            if (pageEl) {
+                pageEl.style.zIndex = '1';
+            }
             this.unloadTimer = setTimeout(() => {
                 var _a, _b;
                 this.unloadTimer = null;
                 (_b = (_a = this.lastUnloadPage) === null || _a === void 0 ? void 0 : _a.onUnload) === null || _b === void 0 ? void 0 : _b.call(_a);
+                eventCenter.trigger('__taroPageOnShowAfterDestroyed');
             }, this.animationDuration);
         }
         else {
@@ -902,6 +1007,9 @@ class PageHandler {
             pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.remove('taro_page_stationed');
             pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.remove('taro_page_show');
             (_c = page === null || page === void 0 ? void 0 : page.onUnload) === null || _c === void 0 ? void 0 : _c.call(page);
+            setTimeout(() => {
+                eventCenter.trigger('__taroPageOnShowAfterDestroyed');
+            }, 0);
         }
         if (delta >= 1)
             this.unload(stacks.last, delta);
@@ -913,10 +1021,11 @@ class PageHandler {
         const param = this.getQuery(page['$taroParams']['stamp'], '', page.options);
         let pageEl = this.getPageContainer(page);
         if (pageEl) {
-            setDisplay(pageEl);
+            pageEl.classList.remove('taro_page_shade');
             this.addAnimation(pageEl, pageNo === 0);
             (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
-            this.bindPageEvents(page, pageEl, pageConfig);
+            this.bindPageEvents(page, pageConfig);
+            this.triggerRouterChange();
         }
         else {
             (_b = page.onLoad) === null || _b === void 0 ? void 0 : _b.call(page, param, () => {
@@ -925,7 +1034,8 @@ class PageHandler {
                 this.addAnimation(pageEl, pageNo === 0);
                 this.onReady(page, false);
                 (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
-                this.bindPageEvents(page, pageEl, pageConfig);
+                this.bindPageEvents(page, pageConfig);
+                this.triggerRouterChange();
             });
         }
     }
@@ -939,12 +1049,12 @@ class PageHandler {
             if (this.hideTimer) {
                 clearTimeout(this.hideTimer);
                 this.hideTimer = null;
-                setDisplay(this.lastHidePage, 'none');
+                pageEl.classList.add('taro_page_shade');
             }
             this.lastHidePage = pageEl;
             this.hideTimer = setTimeout(() => {
                 this.hideTimer = null;
-                setDisplay(this.lastHidePage, 'none');
+                pageEl.classList.add('taro_page_shade');
             }, this.animationDuration + this.animationDelay);
             (_a = page.onHide) === null || _a === void 0 ? void 0 : _a.call(page);
         }
@@ -979,23 +1089,42 @@ class PageHandler {
             ? document.querySelector(`.taro_page#${id}`)
             : document.querySelector('.taro_page') ||
                 document.querySelector('.taro_router'));
-        return el || window;
+        return el;
     }
-    bindPageEvents(page, pageEl, config = {}) {
+    getScrollingElement(page) {
+        if (this.usingWindowScroll)
+            return window;
+        return this.getPageContainer(page) || window;
+    }
+    bindPageEvents(page, config = {}) {
         var _a;
-        if (!pageEl) {
-            pageEl = this.getPageContainer();
-        }
+        const scrollEl = this.getScrollingElement(page);
         const distance = config.onReachBottomDistance || ((_a = this.config.window) === null || _a === void 0 ? void 0 : _a.onReachBottomDistance) || 50;
-        bindPageScroll(page, pageEl, distance);
+        bindPageScroll(page, scrollEl, distance);
         bindPageResize(page);
     }
+    triggerRouterChange() {
+        /**
+         * @tarojs/runtime 中生命周期跑在 promise 中，所以这里需要 setTimeout 延迟事件调用
+         * TODO 考虑将生命周期返回 Promise，用于处理相关事件调用顺序
+         */
+        setTimeout(() => {
+            eventCenter.trigger('__afterTaroRouterChange', {
+                toLocation: {
+                    path: this.pathname
+                }
+            });
+        }, 0);
+    }
 }
 
 const createStampId = incrementId();
 let launchStampId = createStampId();
 function createRouter(app, config, framework) {
     var _a, _b;
+    if (typeof app.onUnhandledRejection === 'function') {
+        window.addEventListener('unhandledrejection', app.onUnhandledRejection);
+    }
     RouterConfig.config = config;
     const handler = new PageHandler(config);
     routesAlias.set(handler.router.customRoutes);
@@ -1020,8 +1149,10 @@ function createRouter(app, config, framework) {
     (_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
     app.onError && window.addEventListener('error', e => { var _a; return (_a = app.onError) === null || _a === void 0 ? void 0 : _a.call(app, e.message); });
     const render = ({ location, action }) => __awaiter(this, void 0, void 0, function* () {
-        var _c, _d, _e, _f, _g;
+        var _c, _d, _e, _f, _g, _h;
         handler.pathname = decodeURI(location.pathname);
+        if ((_c = window.__taroAppConfig) === null || _c === void 0 ? void 0 : _c.usingWindowScroll)
+            window.scrollTo(0, 0);
         eventCenter.trigger('__taroRouterChange', {
             toLocation: {
                 path: handler.pathname
@@ -1034,9 +1165,13 @@ function createRouter(app, config, framework) {
         }
         catch (error) {
             if (error.status === 404) {
-                (_c = app.onPageNotFound) === null || _c === void 0 ? void 0 : _c.call(app, {
-                    path: handler.pathname
-                });
+                const notFoundEvent = {
+                    isEntryPage: stacks.length === 0,
+                    path: handler.pathname,
+                    query: handler.getQuery(createStampId()),
+                };
+                (_d = app.onPageNotFound) === null || _d === void 0 ? void 0 : _d.call(app, notFoundEvent);
+                eventCenter.trigger('__taroRouterNotFound', notFoundEvent);
             }
             else if (/Loading hot update .* failed./.test(error.message)) {
                 // NOTE: webpack5 与 prebundle 搭配使用时，开发环境下初次启动时偶发错误，由于 HMR 加载 chunk hash 错误，导致热更新失败
@@ -1049,16 +1184,16 @@ function createRouter(app, config, framework) {
         if (!element)
             return;
         const pageConfig = handler.pageConfig;
-        let enablePullDownRefresh = ((_d = config === null || config === void 0 ? void 0 : config.window) === null || _d === void 0 ? void 0 : _d.enablePullDownRefresh) || false;
+        let enablePullDownRefresh = ((_e = config === null || config === void 0 ? void 0 : config.window) === null || _e === void 0 ? void 0 : _e.enablePullDownRefresh) || false;
         if (pageConfig) {
-            setTitle((_e = pageConfig.navigationBarTitleText) !== null && _e !== void 0 ? _e : document.title);
+            setTitle((_f = pageConfig.navigationBarTitleText) !== null && _f !== void 0 ? _f : document.title);
             if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
                 enablePullDownRefresh = pageConfig.enablePullDownRefresh;
             }
         }
         const currentPage = Current.page;
         const pathname = handler.pathname;
-        const methodName = (_f = stacks.method) !== null && _f !== void 0 ? _f : '';
+        const methodName = (_g = stacks.method) !== null && _g !== void 0 ? _g : '';
         const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
         stacks.method = '';
@@ -1083,11 +1218,11 @@ function createRouter(app, config, framework) {
             else if (stacks.length > 0) {
                 const firstIns = stacks.getItem(0);
                 if (handler.isTabBar(firstIns.path)) {
-                    handler.unload(currentPage, stacks.length - 1);
+                    handler.unload(currentPage, stacks.length - 1, true);
                     stacks.pushTab(firstIns.path.split('?')[0]);
                 }
                 else {
-                    handler.unload(currentPage, stacks.length);
+                    handler.unload(currentPage, stacks.length, true);
                 }
             }
             if (cacheTabs[handler.pathname]) {
@@ -1104,7 +1239,9 @@ function createRouter(app, config, framework) {
             if (currentPage !== stacks.getItem(prevIndex)) {
                 handler.unload(currentPage, delta, prevIndex > -1);
                 if (prevIndex > -1) {
-                    handler.show(stacks.getItem(prevIndex), pageConfig, prevIndex);
+                    eventCenter.once('__taroPageOnShowAfterDestroyed', () => {
+                        handler.show(stacks.getItem(prevIndex), pageConfig, prevIndex);
+                    });
                 }
                 else {
                     shouldLoad = true;
@@ -1122,7 +1259,7 @@ function createRouter(app, config, framework) {
             shouldLoad = true;
         }
         if (shouldLoad || stacks.length < 1) {
-            const el = (_g = element.default) !== null && _g !== void 0 ? _g : element;
+            const el = (_h = element.default) !== null && _h !== void 0 ? _h : element;
             const loadConfig = Object.assign({}, pageConfig);
             const stacksIndex = stacks.length;
             delete loadConfig['path'];
@@ -1135,16 +1272,11 @@ function createRouter(app, config, framework) {
             else {
                 pageStampId = createStampId();
             }
-            const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, location.pathname, framework, handler.PullDownRefresh) : el, pathname + stringify(handler.getQuery(pageStampId)), {}, loadConfig);
+            const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, pathname, framework, handler.PullDownRefresh, pageStampId) : el, pathname + stringify(handler.getQuery(pageStampId)), {}, loadConfig);
             if (params)
                 page.options = params;
             handler.load(page, pageConfig, pageStampId, stacksIndex);
         }
-        eventCenter.trigger('__afterTaroRouterChange', {
-            toLocation: {
-                path: handler.pathname
-            }
-        });
     });
     const routePath = addLeadingSlash(stripBasename(history.location.pathname, handler.basename));
     if (routePath === '/') {