@tarojs/router 3.3.15 → 3.3.19

package/dist/router.esm.js

@@ -1,4 +1,5 @@
-import { requestAnimationFrame, container, SERVICE_IDENTIFIER, eventCenter, Current, createPageConfig, stringify } from '@tarojs/runtime';
+import { Current, requestAnimationFrame, container, SERVICE_IDENTIFIER, eventCenter, createPageConfig, stringify } from '@tarojs/runtime';
+import { initTabBarApis } from '@tarojs/taro';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -48,8 +49,8 @@ function setHistoryMode(mode, base = '/') {
 function prependBasename(url = '') {
     return basename.replace(/\/$/, '') + '/' + url.replace(/^\//, '');
 }
-const hasBasename = (path, prefix) => new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path);
-const stripBasename = (path, prefix) => hasBasename(path, prefix) ? path.substr(prefix.length) : path;
+const hasBasename = (path = '', prefix = '') => new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path);
+const stripBasename = (path = '', prefix = '') => hasBasename(path, prefix) ? path.substr(prefix.length) : path;
 
 class Stacks {
     constructor() {
@@ -60,9 +61,12 @@ class Stacks {
         if (delta > 0) {
             this.backDelta = delta;
         }
-        else {
+        else if (this.backDelta > 0) {
             --this.backDelta;
         }
+        else {
+            this.backDelta = 0;
+        }
     }
     get length() {
         return this.stacks.length;
@@ -76,16 +80,24 @@ class Stacks {
     getItem(index) {
         return this.stacks[index];
     }
+    getLastIndex(pathname, stateWith = 1) {
+        const list = [...this.stacks].reverse();
+        return list.findIndex((page, i) => { var _a; return i >= stateWith && ((_a = page.path) === null || _a === void 0 ? void 0 : _a.replace(/\?.*/g, '')) === pathname; });
+    }
     getDelta(pathname) {
         if (this.backDelta >= 1) {
             return this.backDelta;
         }
+        const index = this.getLastIndex(pathname);
         // NOTE: 此处为了修复浏览器后退多级页面，在大量重复路由状况下可能出现判断错误的情况 （增强判断能力只能考虑在 query 中新增参数来判断，暂时搁置）
-        const prevIndex = this.stacks.findIndex(r => { var _a; return ((_a = r.path) === null || _a === void 0 ? void 0 : _a.replace(/\?.*/g, '')) === pathname; });
-        return this.length - 1 - prevIndex;
+        return index > 0 ? index : 1;
     }
-    getPrevIndex(pathname) {
-        return this.length - 1 - this.getDelta(pathname);
+    getPrevIndex(pathname, stateWith = 1) {
+        const lastIndex = this.getLastIndex(pathname, stateWith);
+        if (lastIndex < 0) {
+            return -1;
+        }
+        return this.length - 1 - lastIndex;
     }
     pop() {
         return this.stacks.pop();
@@ -96,33 +108,58 @@ class Stacks {
 }
 const stacks = new Stacks();
 
-let routesAlias = {};
-function setRoutesAlias(alias) {
-    routesAlias = alias;
-}
 function addLeadingSlash(path) {
     if (path == null) {
         return '';
     }
     return path.charAt(0) === '/' ? path : '/' + path;
 }
-const isTabBar = (config) => {
-    var _a, _b;
-    const { customRoutes = {}, basename = '', pathname } = config.router;
-    const routePath = stripBasename(pathname, basename);
-    const pagePath = ((_a = Object.entries(customRoutes).find(([, target]) => target === routePath)) === null || _a === void 0 ? void 0 : _a[0]) || routePath;
-    return !!pagePath && (((_b = config.tabBar) === null || _b === void 0 ? void 0 : _b.list) || []).some(t => t.pagePath === pagePath);
-};
+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) => {
+                return arr.includes(url);
+            }).reduce((p, a) => {
+                p.push(a[1]);
+                return p;
+            }, [url]);
+        };
+    }
+    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 = J(option.url);
     // 处理自定义路由
-    Object.keys(routesAlias).forEach(key => {
-        if (addLeadingSlash(key) === addLeadingSlash(pathPieces.pathname)) {
-            pathPieces.pathname = routesAlias[key];
-        }
-    });
+    pathPieces.pathname = routesAlias.getAlias(addLeadingSlash(pathPieces.pathname));
     // 处理相对路径
     if ((_a = pathPieces === null || pathPieces === void 0 ? void 0 : pathPieces.pathname) === null || _a === void 0 ? void 0 : _a.includes('./')) {
         const parts = history.location.pathname.split('/');
@@ -146,9 +183,10 @@ async function navigate(option, method) {
     return new Promise((resolve, reject) => {
         const { success, complete, fail } = option;
         const unListen = history.listen(() => {
-            success === null || success === void 0 ? void 0 : success();
-            complete === null || complete === void 0 ? void 0 : complete();
-            resolve();
+            const res = { errMsg: `${method}: ok` };
+            success === null || success === void 0 ? void 0 : success(res);
+            complete === null || complete === void 0 ? void 0 : complete(res);
+            resolve(res);
             unListen();
         });
         try {
@@ -158,7 +196,11 @@ async function navigate(option, method) {
                 if (method === 'navigateTo') {
                     history.push(pathPieces, state);
                 }
-                else if (method === 'redirectTo') {
+                else if (method === 'redirectTo' || method === 'switchTab') {
+                    history.replace(pathPieces, state);
+                }
+                else if (method === 'reLaunch') {
+                    stacks.delta = stacks.length;
                     history.replace(pathPieces, state);
                 }
             }
@@ -168,9 +210,10 @@ async function navigate(option, method) {
             }
         }
         catch (error) {
-            fail === null || fail === void 0 ? void 0 : fail(error);
-            complete === null || complete === void 0 ? void 0 : complete();
-            reject(error);
+            const res = { errMsg: `${method}: fail ${error.message || error}` };
+            fail === null || fail === void 0 ? void 0 : fail(res);
+            complete === null || complete === void 0 ? void 0 : complete(res);
+            reject(res);
         }
     });
 }
@@ -187,15 +230,14 @@ function navigateBack(options = { delta: 1 }) {
     return navigate(options, 'navigateBack');
 }
 function switchTab(option) {
-    // TODO: 清除掉所有的栈去目标页面
-    return redirectTo(option);
+    return navigate(option, 'switchTab');
 }
 function reLaunch(option) {
-    // TODO: 清除掉所有的栈去目标页面
-    return redirectTo(option);
+    return navigate(option, 'reLaunch');
 }
 function getCurrentPages() {
-    return stacks.get();
+    const pages = stacks.get();
+    return pages.map(e => (Object.assign(Object.assign({}, e), { route: e.path || '' })));
 }
 
 /**
@@ -841,108 +883,6 @@ var UniversalRouter = function () {
 
 UniversalRouter.pathToRegexp = pathToRegexp_1;
 
-const Taro = require('@tarojs/taro-h5');
-function initTabbar(config) {
-    if (config.tabBar == null) {
-        return;
-    }
-    // TODO: 找到 tabbar 的类型
-    const tabbar = document.createElement('taro-tabbar');
-    const homePage = config.pages ? config.pages[0] : '';
-    tabbar.conf = config.tabBar;
-    tabbar.conf.homePage = history.location.pathname === '/' ? homePage : history.location.pathname;
-    const routerConfig = config.router;
-    tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash';
-    if (routerConfig.customRoutes) {
-        tabbar.conf.custom = true;
-        tabbar.conf.customRoutes = routerConfig.customRoutes;
-    }
-    else {
-        tabbar.conf.custom = false;
-        tabbar.conf.customRoutes = {};
-    }
-    if (typeof routerConfig.basename !== 'undefined') {
-        tabbar.conf.basename = routerConfig.basename;
-    }
-    const container = document.getElementById('container');
-    // eslint-disable-next-line no-unused-expressions
-    container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
-    Taro.initTabBarApis(config);
-}
-
-const routerConfig = Object.create(null);
-function init(config) {
-    var _a;
-    config.router.mode = config.router.mode || 'hash';
-    setHistoryMode(config.router.mode, config.router.basename);
-    Object.assign(routerConfig, config);
-    (_a = document.getElementById('app')) === null || _a === void 0 ? void 0 : _a.remove();
-    const container = document.createElement('div');
-    container.classList.add('taro-tabbar__container');
-    container.id = 'container';
-    const panel = document.createElement('div');
-    panel.classList.add('taro-tabbar__panel');
-    const app = document.createElement('div');
-    app.id = 'app';
-    app.classList.add('taro_router');
-    panel.appendChild(app);
-    container.appendChild(panel);
-    document.body.appendChild(container);
-    initTabbar(config);
-}
-
-let pageScrollFn;
-let pageDOM = window;
-function bindPageScroll(page, config) {
-    pageDOM.removeEventListener('scroll', pageScrollFn);
-    pageDOM = getScrollContainer();
-    const distance = config.onReachBottomDistance || 50;
-    let isReachBottom = false;
-    pageScrollFn = function () {
-        page.onPageScroll && page.onPageScroll({
-            scrollTop: pageDOM instanceof Window ? window.scrollY : pageDOM.scrollTop
-        });
-        if (isReachBottom && getOffset() > distance) {
-            isReachBottom = false;
-        }
-        if (page.onReachBottom &&
-            !isReachBottom &&
-            getOffset() < distance) {
-            isReachBottom = true;
-            page.onReachBottom();
-        }
-    };
-    pageDOM.addEventListener('scroll', pageScrollFn, false);
-}
-window.addEventListener('DOMSubtreeModified', (e) => {
-    var _a;
-    // @ts-ignore
-    const className = (_a = e.target) === null || _a === void 0 ? void 0 : _a.className;
-    if (className && /taro-tabbar__/.test(className)) {
-        pageDOM.removeEventListener('scroll', pageScrollFn);
-        pageDOM = getScrollContainer();
-        pageDOM.addEventListener('scroll', pageScrollFn, false);
-    }
-}, false);
-function getScrollContainer() {
-    if (document.querySelector('.taro-tabbar__tabbar') === null) {
-        // 没设置tabbar
-        return window;
-    }
-    else {
-        // 有设置tabbar
-        return document.querySelector('.taro-tabbar__panel') || window;
-    }
-}
-function getOffset() {
-    if (pageDOM instanceof Window) {
-        return document.documentElement.scrollHeight - window.scrollY - window.innerHeight;
-    }
-    else {
-        return pageDOM.scrollHeight - pageDOM.scrollTop - pageDOM.clientHeight;
-    }
-}
-
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
 }
@@ -1494,125 +1434,369 @@ var queryString_5 = queryString.stringifyUrl;
 var queryString_6 = queryString.pick;
 var queryString_7 = queryString.exclude;
 
-function getSearch() {
-    let search = '?';
-    if (routerConfig.router.mode === 'hash') {
-        const idx = location.hash.indexOf('?');
-        if (idx > -1) {
-            search = location.hash.slice(idx);
+let pageScrollFn;
+let pageDOM = window;
+function bindPageScroll(page, config) {
+    pageDOM.removeEventListener('scroll', pageScrollFn);
+    pageDOM = getScrollContainer();
+    const distance = config.onReachBottomDistance || 50;
+    let isReachBottom = false;
+    pageScrollFn = function () {
+        page.onPageScroll && page.onPageScroll({
+            scrollTop: pageDOM instanceof Window ? window.scrollY : pageDOM.scrollTop
+        });
+        if (isReachBottom && getOffset() > distance) {
+            isReachBottom = false;
         }
-    }
-    else {
-        search = location.search;
-    }
-    return search.substr(1);
+        if (page.onReachBottom &&
+            !isReachBottom &&
+            getOffset() < distance) {
+            isReachBottom = true;
+            page.onReachBottom();
+        }
+    };
+    pageDOM.addEventListener('scroll', pageScrollFn, false);
 }
-const qs = function (stamp = 0) {
-    const search = getSearch();
-    const query = search
-        ? queryString.parse(search)
-        : {};
-    if (stamp) {
-        query.stamp = stamp.toString();
+window.addEventListener('DOMSubtreeModified', (e) => {
+    const target = e.target;
+    const className = target === null || target === void 0 ? void 0 : target.className;
+    if (className && /taro_page/.test(className)) {
+        pageDOM.removeEventListener('scroll', pageScrollFn);
+        pageDOM = getScrollContainer();
+        pageDOM.addEventListener('scroll', pageScrollFn, false);
     }
-    return query;
-};
-
-/* eslint-disable dot-notation */
-function pageOnReady(page, onLoad = true) {
+}, false);
+function getScrollContainer() {
     var _a;
-    const pageEl = document.getElementById(page.path);
-    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).then(() => {
-            requestAnimationFrame(() => {
-                page.onReady();
-                pageEl['__isReady'] = true;
-            });
-        });
-        onLoad && (pageEl['__page'] = page);
-    }
+    const id = (_a = Current.page) === null || _a === void 0 ? void 0 : _a.path;
+    const el = (id
+        ? document.getElementById(id)
+        : document.querySelector('.taro_page') ||
+            document.querySelector('.taro_router'));
+    return el || window;
 }
-function loadPage(page, pageConfig = {}, stacksIndex = 0) {
-    if (!page)
-        return;
-    const pageEl = document.getElementById(page.path);
-    if (pageEl) {
-        pageEl.style.display = 'block';
+function getOffset() {
+    if (pageDOM instanceof Window) {
+        return document.documentElement.scrollHeight - window.scrollY - window.innerHeight;
     }
     else {
-        page.onLoad(qs(stacksIndex), () => pageOnReady(page, true));
+        return pageDOM.scrollHeight - pageDOM.scrollTop - pageDOM.clientHeight;
     }
-    stacks.push(page);
-    page.onShow();
-    bindPageScroll(page, pageConfig);
-}
-function unloadPage(page, delta = 1) {
-    if (!page)
-        return;
-    stacks.delta = --delta;
-    stacks.pop();
-    page.onUnload();
-    if (delta >= 1)
-        unloadPage(stacks.last, delta);
-}
-function showPage(page, pageConfig = {}, stacksIndex = 0) {
-    if (!page)
+}
+
+/**
+ * 插入页面动画需要的样式
+ */
+function loadAnimateStyle(ms = 300) {
+    const css = `
+.taro_router .taro_page {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transform: translate3d(100%, 0, 0);
+  transition: transform ${ms}ms;
+}
+
+.taro_router .taro_page.taro_tabbar_page {
+  transform: none;
+}
+
+.taro_router .taro_page.taro_page_show {
+  transform: translate3d(0, 0, 0);
+}`;
+    const style = document.createElement('style');
+    style.innerHTML = css;
+    document.getElementsByTagName('head')[0].appendChild(style);
+}
+
+// @ts-nocheck
+function initTabbar(config) {
+    if (config.tabBar == null) {
         return;
-    page.onShow();
-    const pageEl = document.getElementById(page.path);
-    if (pageEl) {
-        pageEl.style.display = 'block';
+    }
+    // TODO: custom-tab-bar
+    const tabbar = document.createElement('taro-tabbar');
+    const homePage = config.entryPagePath || (config.pages ? config.pages[0] : '');
+    tabbar.conf = config.tabBar;
+    tabbar.conf.homePage = history.location.pathname === '/' ? homePage : history.location.pathname;
+    const routerConfig = config.router;
+    tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash';
+    if (routerConfig.customRoutes) {
+        tabbar.conf.custom = true;
+        tabbar.conf.customRoutes = routerConfig.customRoutes;
     }
     else {
-        page.onLoad(qs(stacksIndex), () => pageOnReady(page, false));
+        tabbar.conf.custom = false;
+        tabbar.conf.customRoutes = {};
+    }
+    if (typeof routerConfig.basename !== 'undefined') {
+        tabbar.conf.basename = routerConfig.basename;
+    }
+    const container = document.getElementById('container');
+    container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
+    initTabBarApis(config);
+}
+
+function setDisplay(el, type = '') {
+    if (el) {
+        el.style.display = type;
     }
-    bindPageScroll(page, pageConfig);
 }
-function hidePage(page) {
-    if (!page)
-        return;
-    // NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
-    const pageEl = document.getElementById(page.path);
-    if (pageEl) {
-        pageEl.style.display = 'none';
-        page.onHide();
+class PageHandler {
+    constructor(config) {
+        this.defaultAnimation = { duration: 300, delay: 50 };
+        this.config = config;
+        this.mount();
     }
-    else {
-        setTimeout(() => hidePage(page), 0);
+    get appId() { return 'app'; }
+    get router() { return this.config.router; }
+    get routerMode() { return this.router.mode || 'hash'; }
+    get customRoutes() { return this.router.customRoutes || {}; }
+    get routes() { return this.config.routes; }
+    get tabBarList() { var _a; return ((_a = this.config.tabBar) === null || _a === void 0 ? void 0 : _a.list) || []; }
+    get PullDownRefresh() { return this.config.PullDownRefresh; }
+    get animation() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.animation) !== null && _b !== void 0 ? _b : this.defaultAnimation; }
+    get animationDelay() {
+        var _a;
+        return typeof this.animation === 'object'
+            ? this.animation.delay
+            : this.animation
+                ? (_a = this.defaultAnimation) === null || _a === void 0 ? void 0 : _a.delay
+                : 0;
+    }
+    get animationDuration() {
+        var _a;
+        return typeof this.animation === 'object'
+            ? this.animation.duration
+            : this.animation
+                ? (_a = this.defaultAnimation) === null || _a === void 0 ? void 0 : _a.duration
+                : 0;
+    }
+    set pathname(p) { this.router.pathname = p; }
+    get pathname() { return this.router.pathname; }
+    get basename() { return this.router.basename || ''; }
+    get pageConfig() {
+        return this.routes.find(r => {
+            var _a;
+            const routePath = stripBasename(this.pathname, this.basename);
+            const pagePath = addLeadingSlash(r.path);
+            return pagePath === routePath || ((_a = routesAlias.getConfig(pagePath)) === null || _a === void 0 ? void 0 : _a.includes(routePath));
+        });
+    }
+    get isTabBar() {
+        var _a;
+        const routePath = stripBasename(this.pathname, this.basename);
+        const pagePath = ((_a = Object.entries(this.customRoutes).find(([, target]) => {
+            if (typeof target === 'string') {
+                return target === routePath;
+            }
+            else if ((target === null || target === void 0 ? void 0 : target.length) > 0) {
+                return target.includes(routePath);
+            }
+            return false;
+        })) === null || _a === void 0 ? void 0 : _a[0]) || routePath;
+        return !!pagePath && this.tabBarList.some(t => t.pagePath === pagePath);
+    }
+    isSamePage(page) {
+        const routePath = stripBasename(this.pathname, this.basename);
+        const pagePath = stripBasename(page === null || page === void 0 ? void 0 : page.path, this.basename);
+        return pagePath.startsWith(routePath + '?');
+    }
+    get search() {
+        let search = '?';
+        if (this.routerMode) {
+            const idx = location.hash.indexOf('?');
+            if (idx > -1) {
+                search = location.hash.slice(idx);
+            }
+        }
+        else {
+            search = location.search;
+        }
+        return search.substr(1);
+    }
+    getQuery(stamp = 0) {
+        const search = this.search;
+        const query = search
+            ? queryString.parse(search)
+            : {};
+        if (stamp) {
+            query.stamp = stamp.toString();
+        }
+        return query;
+    }
+    mount() {
+        var _a;
+        setHistoryMode(this.routerMode, this.router.basename);
+        (_a = document.getElementById('app')) === null || _a === void 0 ? void 0 : _a.remove();
+        this.animation && loadAnimateStyle(this.animationDuration);
+        const app = document.createElement('div');
+        app.id = this.appId;
+        app.classList.add('taro_router');
+        if (this.tabBarList.length > 1) {
+            const container = document.createElement('div');
+            container.classList.add('taro-tabbar__container');
+            container.id = 'container';
+            const panel = document.createElement('div');
+            panel.classList.add('taro-tabbar__panel');
+            panel.appendChild(app);
+            container.appendChild(panel);
+            document.body.appendChild(container);
+            initTabbar(this.config);
+        }
+        else {
+            document.body.appendChild(app);
+        }
+    }
+    onReady(page, onLoad = true) {
+        var _a, _b;
+        const pageEl = document.getElementById(page.path);
+        if (pageEl && !(pageEl === null || pageEl === void 0 ? void 0 : pageEl['__isReady'])) {
+            const el = pageEl.firstElementChild;
+            (_b = (_a = el === null || el === void 0 ? void 0 : el['componentOnReady']) === null || _a === void 0 ? void 0 : _a.call(el)) === null || _b === void 0 ? void 0 : _b.then(() => {
+                requestAnimationFrame(() => {
+                    var _a;
+                    (_a = page.onReady) === null || _a === void 0 ? void 0 : _a.call(page);
+                    pageEl['__isReady'] = true;
+                });
+            });
+            onLoad && (pageEl['__page'] = page);
+        }
+    }
+    load(page, pageConfig = {}, stacksIndex = 0) {
+        var _a;
+        if (!page)
+            return;
+        let pageEl = document.getElementById(page.path);
+        if (pageEl) {
+            setDisplay(pageEl);
+            this.isTabBar && pageEl.classList.add('taro_tabbar_page');
+            this.addAnimation(pageEl, stacksIndex === 0);
+        }
+        else {
+            page.onLoad(this.getQuery(stacksIndex), () => {
+                pageEl = document.getElementById(page.path);
+                this.isTabBar && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
+                this.addAnimation(pageEl, stacksIndex === 0);
+                this.onReady(page, true);
+            });
+        }
+        stacks.push(page);
+        (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
+        bindPageScroll(page, pageConfig);
+    }
+    unload(page, delta = 1, top = false) {
+        var _a;
+        if (!page)
+            return;
+        stacks.delta = --delta;
+        stacks.pop();
+        if (this.animation && top) {
+            if (this.unloadTimer) {
+                clearTimeout(this.unloadTimer);
+                (_a = this.lastUnloadPage) === null || _a === void 0 ? void 0 : _a.onUnload();
+                this.unloadTimer = null;
+            }
+            this.lastUnloadPage = page;
+            const pageEl = document.getElementById(page.path);
+            pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.remove('taro_page_show');
+            this.unloadTimer = setTimeout(() => {
+                var _a;
+                this.unloadTimer = null;
+                (_a = this.lastUnloadPage) === null || _a === void 0 ? void 0 : _a.onUnload();
+            }, this.animationDuration);
+        }
+        else {
+            const pageEl = document.getElementById(page.path);
+            pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.remove('taro_page_show');
+            page === null || page === void 0 ? void 0 : page.onUnload();
+        }
+        if (delta >= 1)
+            this.unload(stacks.last, delta);
+    }
+    show(page, pageConfig = {}, stacksIndex = 0) {
+        var _a;
+        if (!page)
+            return;
+        (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
+        let pageEl = document.getElementById(page.path);
+        if (pageEl) {
+            setDisplay(pageEl);
+            this.addAnimation(pageEl, stacksIndex === 0);
+        }
+        else {
+            page.onLoad(this.getQuery(stacksIndex), () => {
+                pageEl = document.getElementById(page.path);
+                this.addAnimation(pageEl, stacksIndex === 0);
+                this.onReady(page, false);
+            });
+        }
+        bindPageScroll(page, pageConfig);
+    }
+    hide(page) {
+        var _a;
+        if (!page)
+            return;
+        // NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
+        const pageEl = document.getElementById(page.path);
+        if (pageEl) {
+            if (this.hideTimer) {
+                clearTimeout(this.hideTimer);
+                this.hideTimer = null;
+                setDisplay(this.lastHidePage, 'none');
+            }
+            this.lastHidePage = pageEl;
+            this.hideTimer = setTimeout(() => {
+                this.hideTimer = null;
+                setDisplay(this.lastHidePage, 'none');
+            }, this.animationDelay);
+            (_a = page.onHide) === null || _a === void 0 ? void 0 : _a.call(page);
+        }
+        else {
+            setTimeout(() => this.hide(page), 0);
+        }
+    }
+    addAnimation(pageEl, first = false) {
+        if (!pageEl)
+            return;
+        if (this.animation && !first) {
+            setTimeout(() => {
+                pageEl.classList.add('taro_page_show');
+            }, this.animationDelay);
+        }
+        else {
+            pageEl.classList.add('taro_page_show');
+        }
     }
 }
 
 /* eslint-disable dot-notation */
 function createRouter(app, config, framework) {
-    var _a;
-    init(config);
-    const routes = [];
-    const alias = (_a = config.router.customRoutes) !== null && _a !== void 0 ? _a : {};
+    var _a, _b, _c;
+    const handler = new PageHandler(config);
     const runtimeHooks = container.get(SERVICE_IDENTIFIER.Hooks);
-    setRoutesAlias(alias);
-    for (let i = 0; i < config.routes.length; i++) {
-        const route = config.routes[i];
-        const path = addLeadingSlash(route.path);
-        routes.push({
-            path: alias[path] || path,
-            action: route.load
-        });
-    }
-    const basename = config.router.basename;
+    routesAlias.set(handler.router.customRoutes);
+    const basename = handler.router.basename;
+    const routes = handler.routes.map(route => ({
+        path: routesAlias.getAll(addLeadingSlash(route.path)),
+        action: route.load
+    }));
+    const entryPagePath = config.entryPagePath || ((_a = routes[0].path) === null || _a === void 0 ? void 0 : _a[0]);
     const router = new UniversalRouter(routes, { baseUrl: basename || '' });
-    app.onLaunch();
+    (_b = app.onLaunch) === null || _b === void 0 ? void 0 : _b.call(app);
     const render = async ({ location, action }) => {
         var _a, _b, _c, _d;
-        routerConfig.router.pathname = location.pathname;
+        handler.pathname = location.pathname;
         let element;
         try {
-            element = await router.resolve(config.router.forcePath || location.pathname);
+            element = await router.resolve(handler.router.forcePath || handler.pathname);
         }
         catch (error) {
             if (error.status === 404) {
                 (_a = app.onPageNotFound) === null || _a === void 0 ? void 0 : _a.call(app, {
-                    path: location.pathname
+                    path: handler.pathname
                 });
             }
             else {
@@ -1621,14 +1805,11 @@ function createRouter(app, config, framework) {
         }
         if (!element)
             return;
-        const pageConfig = config.routes.find(r => {
-            const path = addLeadingSlash(r.path);
-            return path === location.pathname || alias[path] === location.pathname;
-        });
+        const pageConfig = handler.pageConfig;
         let enablePullDownRefresh = false;
         eventCenter.trigger('__taroRouterChange', {
             toLocation: {
-                path: location.pathname
+                path: handler.pathname
             }
         });
         if (pageConfig) {
@@ -1636,53 +1817,56 @@ function createRouter(app, config, framework) {
             enablePullDownRefresh = pageConfig.enablePullDownRefresh;
         }
         const currentPage = Current.page;
-        const pathname = location.pathname;
+        const pathname = handler.pathname;
         let shouldLoad = false;
         if (action === 'POP') {
             // NOTE: 浏览器事件退后多次时，该事件只会被触发一次
             const prevIndex = stacks.getPrevIndex(pathname);
             const delta = stacks.getDelta(pathname);
-            unloadPage(currentPage, delta);
+            handler.unload(currentPage, delta, prevIndex > -1);
             if (prevIndex > -1) {
-                showPage(stacks.getItem(prevIndex), pageConfig, prevIndex);
+                handler.show(stacks.getItem(prevIndex), pageConfig, prevIndex);
             }
             else {
                 shouldLoad = true;
             }
         }
-        else if (action === 'PUSH') {
-            hidePage(currentPage);
-            shouldLoad = true;
-        }
-        else if (action === 'REPLACE') {
-            if (isTabBar(config)) {
-                hidePage(currentPage);
-                const prevIndex = stacks.getPrevIndex(pathname);
+        else {
+            if (handler.isTabBar) {
+                if (handler.isSamePage(currentPage))
+                    return;
+                const prevIndex = stacks.getPrevIndex(pathname, 0);
+                handler.hide(currentPage);
                 if (prevIndex > -1) {
                     // NOTE: tabbar 页且之前出现过，直接复用
-                    return showPage(stacks.getItem(prevIndex), pageConfig, prevIndex);
+                    return handler.show(stacks.getItem(prevIndex), pageConfig, prevIndex);
                 }
             }
-            else {
-                unloadPage(currentPage);
+            else if (action === 'REPLACE') {
+                const delta = stacks.getDelta(pathname);
+                // NOTE: 页面路由记录并不会清空，只是移除掉缓存的 stack 以及页面
+                handler.unload(currentPage, delta);
+            }
+            else if (action === 'PUSH') {
+                handler.hide(currentPage);
             }
             shouldLoad = true;
         }
-        if (shouldLoad) {
+        if (shouldLoad || stacks.length < 1) {
             const el = (_c = element.default) !== null && _c !== void 0 ? _c : element;
             const loadConfig = Object.assign({}, pageConfig);
             const stacksIndex = stacks.length;
             delete loadConfig['path'];
             delete loadConfig['load'];
-            const page = createPageConfig(enablePullDownRefresh ? (_d = runtimeHooks.createPullDownComponent) === null || _d === void 0 ? void 0 : _d.call(runtimeHooks, el, location.pathname, framework, routerConfig.PullDownRefresh) : el, pathname + stringify(qs(stacksIndex)), {}, loadConfig);
-            return loadPage(page, pageConfig, stacksIndex);
+            const page = createPageConfig(enablePullDownRefresh ? (_d = runtimeHooks.createPullDownComponent) === null || _d === void 0 ? void 0 : _d.call(runtimeHooks, el, location.pathname, framework, handler.PullDownRefresh) : el, pathname + stringify(handler.getQuery(stacksIndex)), {}, loadConfig);
+            return handler.load(page, pageConfig, stacksIndex);
         }
     };
     if (history.location.pathname === '/') {
-        history.replace(prependBasename(routes[0].path + history.location.search));
+        history.replace(prependBasename(entryPagePath + history.location.search));
     }
     render({ location: history.location, action: r.Push });
-    app.onShow(qs(stacks.length));
+    (_c = app.onShow) === null || _c === void 0 ? void 0 : _c.call(app, handler.getQuery(stacks.length));
     return history.listen(render);
 }