@tarojs/router 3.3.14 → 3.3.18

package/dist/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var runtime = require('@tarojs/runtime');
+var taro = require('@tarojs/taro');
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -56,62 +57,156 @@ function prependBasename(url) {
     if ( url === void 0 ) url = '';
 
     return basename.replace(/\/$/, '') + '/' + url.replace(/^\//, '');
-}
+}
+var hasBasename = function (path, prefix) {
+    if ( path === void 0 ) path = '';
+    if ( prefix === void 0 ) prefix = '';
 
-var stacks = [];
+    return new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path);
+};
+var stripBasename = function (path, prefix) {
+    if ( path === void 0 ) path = '';
+    if ( prefix === void 0 ) prefix = '';
+
+    return hasBasename(path, prefix) ? path.substr(prefix.length) : path;
+};
+
+var Stacks = function Stacks() {
+    this.stacks = [];
+    this.backDelta = 0;
+};
+
+var prototypeAccessors = { delta: { configurable: true },length: { configurable: true },last: { configurable: true } };
+prototypeAccessors.delta.set = function (delta) {
+    if (delta > 0) {
+        this.backDelta = delta;
+    }
+    else {
+        --this.backDelta;
+    }
+};
+prototypeAccessors.length.get = function () {
+    return this.stacks.length;
+};
+prototypeAccessors.last.get = function () {
+    return this.stacks[this.length - 1];
+};
+Stacks.prototype.get = function get () {
+    return this.stacks;
+};
+Stacks.prototype.getItem = function getItem (index) {
+    return this.stacks[index];
+};
+Stacks.prototype.getLastIndex = function getLastIndex (pathname, stateWith) {
+        if ( stateWith === void 0 ) stateWith = 1;
+
+    var list = [].concat( this.stacks ).reverse();
+    return list.findIndex(function (page, i) { var _a; return i >= stateWith && ((_a = page.path) === null || _a === void 0 ? void 0 : _a.replace(/\?.*/g, '')) === pathname; });
+};
+Stacks.prototype.getDelta = function getDelta (pathname) {
+    if (this.backDelta >= 1) {
+        return this.backDelta;
+    }
+    // NOTE: 此处为了修复浏览器后退多级页面，在大量重复路由状况下可能出现判断错误的情况 （增强判断能力只能考虑在 query 中新增参数来判断，暂时搁置）
+    return this.getLastIndex(pathname) || 1;
+};
+Stacks.prototype.getPrevIndex = function getPrevIndex (pathname, stateWith) {
+        if ( stateWith === void 0 ) stateWith = 1;
+
+    var lastIndex = this.getLastIndex(pathname, stateWith);
+    if (lastIndex < 0) {
+        return -1;
+    }
+    return this.length - 1 - lastIndex;
+};
+Stacks.prototype.pop = function pop () {
+    return this.stacks.pop();
+};
+Stacks.prototype.push = function push (page) {
+    return this.stacks.push(page);
+};
+
+Object.defineProperties( Stacks.prototype, prototypeAccessors );
+var stacks = new Stacks();
 
-var routesAlias = {};
-function setRoutesAlias(alias) {
-    routesAlias = alias;
-}
 function addLeadingSlash(path) {
     if (path == null) {
         return '';
     }
     return path.charAt(0) === '/' ? path : '/' + path;
 }
-// 解决navigateBack调用delta>1时,路由栈异常问题
-// 比如:A->B->C,navigateBack({delta: 2}),此时路由栈中还存在B页面
-// 原因:主要是由于一次性退出多层级页面时,此action只会执行一次,此处进行手动处理
-var historyBackDelta = 1;
-function setHistoryBackDelta(delta) {
-    historyBackDelta = delta;
-}
-// eslint-disable-next-line @typescript-eslint/ban-types
-var throttle = function (fn, threshold) {
-    var lastTime = 0;
-    return function () {
-        var now = Date.now();
-        if (now - lastTime > threshold) {
-            fn.apply(this, arguments);
-            lastTime = now;
-        }
+var RoutesAlias = function RoutesAlias() {
+    var this$1 = this;
+
+    this.conf = [];
+    this.getConfig = function (url) {
+        if ( url === void 0 ) url = '';
+
+        var customRoute = this$1.conf.filter(function (arr) {
+            return arr.includes(url);
+        });
+        return customRoute[0];
+    };
+    this.getOrigin = function (url) {
+        if ( url === void 0 ) url = '';
+
+        var _a;
+        return ((_a = this$1.getConfig(url)) === null || _a === void 0 ? void 0 : _a[0]) || url;
+    };
+    this.getAlias = function (url) {
+        if ( url === void 0 ) url = '';
+
+        var _a;
+        return ((_a = this$1.getConfig(url)) === null || _a === void 0 ? void 0 : _a[1]) || url;
+    };
+    this.getAll = function (url) {
+        if ( url === void 0 ) url = '';
+
+        return this$1.conf.filter(function (arr) {
+            return arr.includes(url);
+        }).reduce(function (p, a) {
+            p.push(a[1]);
+            return p;
+        }, [url]);
     };
 };
-var stripBasename = function (path, basename) { return path.startsWith(basename) ? path.replace(basename, '') : path; };
-var isTabBar = function (config) {
-    var _a, _b;
-    var ref = config.router;
-    var customRoutes = ref.customRoutes; if ( customRoutes === void 0 ) customRoutes = {};
-    var basename = ref.basename; if ( basename === void 0 ) basename = '';
-    var pathname = ref.pathname;
-    var routePath = stripBasename(pathname, basename);
-    var pagePath = ((_a = Object.entries(customRoutes).find(function (ref) {
-        var target = ref[1];
-
-        return 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(function (t) { return t.pagePath === pagePath; });
-};
+RoutesAlias.prototype.set = function set (customRoutes) {
+        var this$1 = this;
+        var ref;
+
+        if ( customRoutes === void 0 ) customRoutes = {};
+    var loop = function ( key ) {
+        var path = customRoutes[key];
+        key = addLeadingSlash(key);
+        if (typeof path === 'string') {
+            this$1.conf.push([key, addLeadingSlash(path)]);
+        }
+        else if ((path === null || path === void 0 ? void 0 : path.length) > 0) {
+            (ref = this$1.conf).push.apply(ref, path.map(function (p) { return [key, addLeadingSlash(p)]; }));
+        }
+    };
+
+        for (var key in customRoutes) loop( key );
+};
+var routesAlias = new RoutesAlias();
 
 function processNavigateUrl(option) {
+    var _a;
     var pathPieces = J(option.url);
     // 处理自定义路由
-    Object.keys(routesAlias).forEach(function (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('./')) {
+        var parts = exports.history.location.pathname.split('/');
+        parts.pop();
+        pathPieces.pathname.split('/').forEach(function (item) {
+            if (item === '.') {
+                return;
+            }
+            item === '..' ? parts.pop() : parts.push(item);
+        });
+        pathPieces.pathname = parts.join('/');
+    }
     // 处理 basename
     pathPieces.pathname = prependBasename(pathPieces.pathname);
     // hack fix history v5 bug: https://github.com/remix-run/history/issues/814
@@ -125,9 +220,10 @@ async function navigate(option, method) {
         var complete = option.complete;
         var fail = option.fail;
         var unListen = exports.history.listen(function () {
-            success === null || success === void 0 ? void 0 : success();
-            complete === null || complete === void 0 ? void 0 : complete();
-            resolve();
+            var 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 {
@@ -137,19 +233,24 @@ async function navigate(option, method) {
                 if (method === 'navigateTo') {
                     exports.history.push(pathPieces, state);
                 }
-                else if (method === 'redirectTo') {
+                else if (method === 'redirectTo' || method === 'switchTab') {
+                    exports.history.replace(pathPieces, state);
+                }
+                else if (method === 'reLaunch') {
+                    stacks.delta = stacks.length;
                     exports.history.replace(pathPieces, state);
                 }
             }
             else if (method === 'navigateBack') {
-                setHistoryBackDelta(option.delta);
+                stacks.delta = option.delta;
                 exports.history.go(-option.delta);
             }
         }
         catch (error) {
-            fail === null || fail === void 0 ? void 0 : fail(error);
-            complete === null || complete === void 0 ? void 0 : complete();
-            reject(error);
+            var 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);
         }
     });
 }
@@ -168,15 +269,14 @@ function navigateBack(options) {
     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;
+    var pages = stacks.get();
+    return pages.map(function (e) { return (Object.assign(Object.assign({}, e), { route: e.path || '' })); });
 }
 
 /**
@@ -822,55 +922,6 @@ var UniversalRouter = function () {
 
 UniversalRouter.pathToRegexp = pathToRegexp_1;
 
-function initTabbar(config) {
-    if (config.tabBar == null) {
-        return;
-    }
-    // TODO: 找到 tabbar 的类型
-    var tabbar = document.createElement('taro-tabbar');
-    var homePage = config.pages ? config.pages[0] : '';
-    tabbar.conf = config.tabBar;
-    tabbar.conf.homePage = exports.history.location.pathname === '/' ? homePage : exports.history.location.pathname;
-    var routerConfig = config.router;
-    tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash';
-    tabbar.conf.custom = !!routerConfig.customRoutes;
-    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;
-    }
-    var container = document.getElementById('container');
-    // eslint-disable-next-line no-unused-expressions
-    container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
-}
-
-var 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();
-    var container = document.createElement('div');
-    container.classList.add('taro-tabbar__container');
-    container.id = 'container';
-    var panel = document.createElement('div');
-    panel.classList.add('taro-tabbar__panel');
-    var app = document.createElement('div');
-    app.id = 'app';
-    app.classList.add('taro_router');
-    panel.appendChild(app);
-    container.appendChild(panel);
-    document.body.appendChild(container);
-    initTabbar(config);
-}
-
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
 }
@@ -1427,21 +1478,6 @@ var queryString_5 = queryString.stringifyUrl;
 var queryString_6 = queryString.pick;
 var queryString_7 = queryString.exclude;
 
-var qs = function (stamp) {
-    if ( stamp === void 0 ) stamp = 0;
-
-    var search = routerConfig.router.mode === 'hash'
-        ? location.hash.slice(routerConfig.router.pathname.length + 1)
-        : location.search;
-    var query = search
-        ? queryString.parse(search.substr(1))
-        : {};
-    if (stamp) {
-        query.stamp = stamp.toString();
-    }
-    return query;
-};
-
 var pageScrollFn;
 var pageDOM = window;
 function bindPageScroll(page, config) {
@@ -1466,24 +1502,22 @@ function bindPageScroll(page, config) {
     pageDOM.addEventListener('scroll', pageScrollFn, false);
 }
 window.addEventListener('DOMSubtreeModified', function (e) {
-    var _a;
-    // @ts-ignore
-    var className = (_a = e.target) === null || _a === void 0 ? void 0 : _a.className;
-    if (className && /taro-tabbar__/.test(className)) {
+    var target = e.target;
+    var 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);
     }
 }, false);
 function getScrollContainer() {
-    if (document.querySelector('.taro-tabbar__tabbar') === null) {
-        // 没设置tabbar
-        return window;
-    }
-    else {
-        // 有设置tabbar
-        return document.querySelector('.taro-tabbar__panel') || window;
-    }
+    var _a;
+    var id = (_a = runtime.Current.page) === null || _a === void 0 ? void 0 : _a.path;
+    var el = (id
+        ? document.getElementById(id)
+        : document.querySelector('.taro_page') ||
+            document.querySelector('.taro_router'));
+    return el || window;
 }
 function getOffset() {
     if (pageDOM instanceof Window) {
@@ -1494,47 +1528,174 @@ function getOffset() {
     }
 }
 
-/* eslint-disable dot-notation */
-function hidePage(page) {
-    if (page != null) {
-        page.onHide();
-        var pageEl = document.getElementById(page.path);
-        if (pageEl) {
-            pageEl.style.display = 'none';
-        }
+/**
+ * 插入页面动画需要的样式
+ */
+function loadAnimateStyle(ms) {
+    if ( ms === void 0 ) ms = 300;
+
+    var css = "\n.taro_router .taro_page {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  transform: translate3d(100%, 0, 0);\n  transition: transform " + ms + "ms;\n}\n\n.taro_router .taro_page.taro_tabbar_page {\n  transform: none;\n}\n\n.taro_router .taro_page.taro_page_show {\n  transform: translate3d(0, 0, 0);\n}";
+    var style = document.createElement('style');
+    style.innerHTML = css;
+    document.getElementsByTagName('head')[0].appendChild(style);
+}
+
+// @ts-nocheck
+function initTabbar(config) {
+    if (config.tabBar == null) {
+        return;
+    }
+    // TODO: custom-tab-bar
+    var tabbar = document.createElement('taro-tabbar');
+    var homePage = config.entryPagePath || (config.pages ? config.pages[0] : '');
+    tabbar.conf = config.tabBar;
+    tabbar.conf.homePage = exports.history.location.pathname === '/' ? homePage : exports.history.location.pathname;
+    var 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;
+    }
+    var container = document.getElementById('container');
+    container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
+    taro.initTabBarApis(config);
+}
+
+function setDisplay(el, type) {
+    if ( type === void 0 ) type = '';
+
+    if (el) {
+        el.style.display = type;
     }
 }
-function showPage(page, pageConfig, stacksIndex) {
-    if ( stacksIndex === void 0 ) stacksIndex = 0;
+var PageHandler = function PageHandler(config) {
+    this.defaultAnimation = { duration: 300, delay: 50 };
+    this.config = config;
+    this.mount();
+};
+
+var prototypeAccessors$1 = { appId: { configurable: true },router: { configurable: true },routerMode: { configurable: true },customRoutes: { configurable: true },routes: { configurable: true },tabBarList: { configurable: true },PullDownRefresh: { configurable: true },animation: { configurable: true },animationDelay: { configurable: true },animationDuration: { configurable: true },pathname: { configurable: true },basename: { configurable: true },pageConfig: { configurable: true },isTabBar: { configurable: true },search: { configurable: true } };
+prototypeAccessors$1.appId.get = function () { return 'app'; };
+prototypeAccessors$1.router.get = function () { return this.config.router; };
+prototypeAccessors$1.routerMode.get = function () { return this.router.mode || 'hash'; };
+prototypeAccessors$1.customRoutes.get = function () { return this.router.customRoutes || {}; };
+prototypeAccessors$1.routes.get = function () { return this.config.routes; };
+prototypeAccessors$1.tabBarList.get = function () { var _a; return ((_a = this.config.tabBar) === null || _a === void 0 ? void 0 : _a.list) || []; };
+prototypeAccessors$1.PullDownRefresh.get = function () { return this.config.PullDownRefresh; };
+prototypeAccessors$1.animation.get = function () { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.animation) !== null && _b !== void 0 ? _b : this.defaultAnimation; };
+prototypeAccessors$1.animationDelay.get = function () {
+    var _a;
+    return typeof this.animation === 'object'
+        ? this.animation.delay
+        : this.animation
+            ? (_a = this.defaultAnimation) === null || _a === void 0 ? void 0 : _a.delay
+            : 0;
+};
+prototypeAccessors$1.animationDuration.get = function () {
+    var _a;
+    return typeof this.animation === 'object'
+        ? this.animation.duration
+        : this.animation
+            ? (_a = this.defaultAnimation) === null || _a === void 0 ? void 0 : _a.duration
+            : 0;
+};
+prototypeAccessors$1.pathname.set = function (p) { this.router.pathname = p; };
+prototypeAccessors$1.pathname.get = function () { return this.router.pathname; };
+prototypeAccessors$1.basename.get = function () { return this.router.basename || ''; };
+prototypeAccessors$1.pageConfig.get = function () {
+        var this$1 = this;
 
-    if (page != null) {
-        page.onShow();
-        var pageEl = document.getElementById(page.path);
-        if (pageEl) {
-            pageEl.style.display = 'block';
+    return this.routes.find(function (r) {
+        var _a;
+        var routePath = stripBasename(this$1.pathname, this$1.basename);
+        var pagePath = addLeadingSlash(r.path);
+        return pagePath === routePath || ((_a = routesAlias.getConfig(pagePath)) === null || _a === void 0 ? void 0 : _a.includes(routePath));
+    });
+};
+prototypeAccessors$1.isTabBar.get = function () {
+    var _a;
+    var routePath = stripBasename(this.pathname, this.basename);
+    var pagePath = ((_a = Object.entries(this.customRoutes).find(function (ref) {
+            var target = ref[1];
+
+        if (typeof target === 'string') {
+            return target === routePath;
         }
-        else {
-            page.onLoad(qs(stacksIndex));
-            pageEl = document.getElementById(page.path);
-            pageOnReady(pageEl, page, false);
+        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(function (t) { return t.pagePath === pagePath; });
+};
+PageHandler.prototype.isSamePage = function isSamePage (page) {
+    var routePath = stripBasename(this.pathname, this.basename);
+    var pagePath = stripBasename(page === null || page === void 0 ? void 0 : page.path, this.basename);
+    return pagePath.startsWith(routePath + '?');
+};
+prototypeAccessors$1.search.get = function () {
+    var search = '?';
+    if (this.routerMode) {
+        var idx = location.hash.indexOf('?');
+        if (idx > -1) {
+            search = location.hash.slice(idx);
         }
-        bindPageScroll(page, pageConfig || {});
     }
-}
-function unloadPage(page) {
-    if (page != null) {
-        stacks.pop();
-        page.onUnload();
+    else {
+        search = location.search;
     }
-}
-function pageOnReady(pageEl, page, onLoad) {
-    if ( onLoad === void 0 ) onLoad = true;
+    return search.substr(1);
+};
+PageHandler.prototype.getQuery = function getQuery (stamp) {
+        if ( stamp === void 0 ) stamp = 0;
 
+    var search = this.search;
+    var query = search
+        ? queryString.parse(search)
+        : {};
+    if (stamp) {
+        query.stamp = stamp.toString();
+    }
+    return query;
+};
+PageHandler.prototype.mount = function 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);
+    var app = document.createElement('div');
+    app.id = this.appId;
+    app.classList.add('taro_router');
+    if (this.tabBarList.length > 1) {
+        var container = document.createElement('div');
+        container.classList.add('taro-tabbar__container');
+        container.id = 'container';
+        var 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);
+    }
+};
+PageHandler.prototype.onReady = function onReady (page, onLoad) {
+        if ( onLoad === void 0 ) onLoad = true;
+
+    var _a, _b;
+    var pageEl = document.getElementById(page.path);
     if (pageEl && !(pageEl === null || pageEl === void 0 ? void 0 : pageEl['__isReady'])) {
         var el = pageEl.firstElementChild;
-        // eslint-disable-next-line no-unused-expressions
-        (_a = el === null || el === void 0 ? void 0 : el['componentOnReady']) === null || _a === void 0 ? void 0 : _a.call(el).then(function () {
+        (_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(function () {
             runtime.requestAnimationFrame(function () {
                 page.onReady();
                 pageEl['__isReady'] = true;
@@ -1542,58 +1703,151 @@ function pageOnReady(pageEl, page, onLoad) {
         });
         onLoad && (pageEl['__page'] = page);
     }
-}
-function loadPage(page, pageConfig, stacksIndex) {
-    if ( stacksIndex === void 0 ) stacksIndex = 0;
+};
+PageHandler.prototype.load = function load (page, pageConfig, stacksIndex) {
+        var this$1 = this;
+        if ( pageConfig === void 0 ) pageConfig = {};
+        if ( stacksIndex === void 0 ) stacksIndex = 0;
 
-    if (page !== null) {
-        var pageEl = document.getElementById(page.path);
-        if (pageEl) {
-            pageEl.style.display = 'block';
+    if (!page)
+        { return; }
+    var 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), function () {
+            pageEl = document.getElementById(page.path);
+            this$1.isTabBar && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
+            this$1.addAnimation(pageEl, stacksIndex === 0);
+            this$1.onReady(page, true);
+        });
+    }
+    stacks.push(page);
+    page.onShow();
+    bindPageScroll(page, pageConfig);
+};
+PageHandler.prototype.unload = function unload (page, delta, top) {
+        var this$1 = this;
+        if ( delta === void 0 ) delta = 1;
+        if ( top === void 0 ) 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;
         }
-        else {
-            page.onLoad(qs(stacksIndex), function () {
-                pageEl = document.getElementById(page.path);
-                pageOnReady(pageEl, page);
-            });
+        this.lastUnloadPage = page;
+        var pageEl = document.getElementById(page.path);
+        pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.remove('taro_page_show');
+        this.unloadTimer = setTimeout(function () {
+            var _a;
+            this$1.unloadTimer = null;
+            (_a = this$1.lastUnloadPage) === null || _a === void 0 ? void 0 : _a.onUnload();
+        }, this.animationDuration);
+    }
+    if (delta >= 1)
+        { this.unload(stacks.last, delta); }
+};
+PageHandler.prototype.show = function show (page, pageConfig, stacksIndex) {
+        var this$1 = this;
+        if ( pageConfig === void 0 ) pageConfig = {};
+        if ( stacksIndex === void 0 ) stacksIndex = 0;
+
+    if (!page)
+        { return; }
+    page.onShow();
+    var pageEl = document.getElementById(page.path);
+    if (pageEl) {
+        setDisplay(pageEl);
+        this.addAnimation(pageEl, stacksIndex === 0);
+    }
+    else {
+        page.onLoad(this.getQuery(stacksIndex), function () {
+            pageEl = document.getElementById(page.path);
+            this$1.addAnimation(pageEl, stacksIndex === 0);
+            this$1.onReady(page, false);
+        });
+    }
+    bindPageScroll(page, pageConfig);
+};
+PageHandler.prototype.hide = function hide (page) {
+        var this$1 = this;
+
+    if (!page)
+        { return; }
+    // NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
+    var pageEl = document.getElementById(page.path);
+    if (pageEl) {
+        if (this.hideTimer) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+            setDisplay(this.lastHidePage, 'none');
         }
-        stacks.push(page);
-        page.onShow();
-        bindPageScroll(page, pageConfig || {});
+        this.lastHidePage = pageEl;
+        this.hideTimer = setTimeout(function () {
+            this$1.hideTimer = null;
+            setDisplay(this$1.lastHidePage, 'none');
+        }, this.animationDelay);
+        page.onHide();
     }
-}
+    else {
+        setTimeout(function () { return this$1.hide(page); }, 0);
+    }
+};
+PageHandler.prototype.addAnimation = function addAnimation (pageEl, first) {
+        if ( first === void 0 ) first = false;
+
+    if (!pageEl)
+        { return; }
+    if (this.animation && !first) {
+        setTimeout(function () {
+            pageEl.classList.add('taro_page_show');
+        }, this.animationDelay);
+    }
+    else {
+        pageEl.classList.add('taro_page_show');
+    }
+};
+
+Object.defineProperties( PageHandler.prototype, prototypeAccessors$1 );
+
+/* eslint-disable dot-notation */
 function createRouter(app, config, framework) {
     var _a;
-    init(config);
-    var routes = [];
-    var alias = (_a = config.router.customRoutes) !== null && _a !== void 0 ? _a : {};
+    var handler = new PageHandler(config);
     var runtimeHooks = runtime.container.get(runtime.SERVICE_IDENTIFIER.Hooks);
-    setRoutesAlias(alias);
-    for (var i = 0; i < config.routes.length; i++) {
-        var route = config.routes[i];
-        var path = addLeadingSlash(route.path);
-        routes.push({
-            path: alias[path] || path,
-            action: route.load
-        });
-    }
-    var basename = config.router.basename;
+    routesAlias.set(handler.router.customRoutes);
+    var basename = handler.router.basename;
+    var routes = handler.routes.map(function (route) { return ({
+        path: routesAlias.getAll(addLeadingSlash(route.path)),
+        action: route.load
+    }); });
+    var entryPagePath = config.entryPagePath || ((_a = routes[0].path) === null || _a === void 0 ? void 0 : _a[0]);
     var router = new UniversalRouter(routes, { baseUrl: basename || '' });
     app.onLaunch();
-    var render = throttle(async function (ref) {
+    var render = async function (ref) {
         var location = ref.location;
         var action = ref.action;
 
         var _a, _b, _c, _d;
-        routerConfig.router.pathname = location.pathname;
+        handler.pathname = location.pathname;
         var 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 {
@@ -1602,84 +1856,68 @@ function createRouter(app, config, framework) {
         }
         if (!element)
             { return; }
-        var pageConfig = config.routes.find(function (r) {
-            var path = addLeadingSlash(r.path);
-            return path === location.pathname || alias[path] === location.pathname;
-        });
+        var pageConfig = handler.pageConfig;
         var enablePullDownRefresh = false;
         runtime.eventCenter.trigger('__taroRouterChange', {
             toLocation: {
-                path: location.pathname
+                path: handler.pathname
             }
         });
         if (pageConfig) {
             document.title = (_b = pageConfig.navigationBarTitleText) !== null && _b !== void 0 ? _b : document.title;
             enablePullDownRefresh = pageConfig.enablePullDownRefresh;
         }
+        var currentPage = runtime.Current.page;
+        var pathname = handler.pathname;
         var shouldLoad = false;
         if (action === 'POP') {
-            unloadPage(runtime.Current.page);
-            var delta = historyBackDelta;
-            while (delta-- > 1) {
-                unloadPage(stacks.slice(-1)[0]);
-            }
-            // 最终必须重置为 1
-            setHistoryBackDelta(1);
-            var prevIndex = stacks.reduceRight(function (p, s, i) {
-                if (p !== 0)
-                    { return p; }
-                else if (s.path === location.pathname + runtime.stringify(qs(i)))
-                    { return i; }
-                else
-                    { return 0; }
-            }, 0);
-            var prev = stacks[prevIndex];
-            if (prev) {
-                showPage(prev, pageConfig, prevIndex);
+            // NOTE: 浏览器事件退后多次时，该事件只会被触发一次
+            var prevIndex = stacks.getPrevIndex(pathname);
+            var delta = stacks.getDelta(pathname);
+            handler.unload(currentPage, delta, prevIndex > -1);
+            if (prevIndex > -1) {
+                handler.show(stacks.getItem(prevIndex), pageConfig, prevIndex);
             }
             else {
                 shouldLoad = true;
             }
         }
-        else if (action === 'PUSH') {
-            hidePage(runtime.Current.page);
-            shouldLoad = true;
-        }
-        else if (action === 'REPLACE') {
-            if (isTabBar(config)) {
-                hidePage(runtime.Current.page);
-                var pathname = stripBasename(config.router.pathname, basename);
-                var prevIndex$1 = stacks.findIndex(function (r) {
-                    var _a;
-                    return ((_a = r.path) === null || _a === void 0 ? void 0 : _a.replace(/\?.*/g, '')) === pathname;
-                });
+        else {
+            if (handler.isTabBar) {
+                if (handler.isSamePage(currentPage))
+                    { return; }
+                var prevIndex$1 = stacks.getPrevIndex(pathname, 0);
+                handler.hide(currentPage);
                 if (prevIndex$1 > -1) {
-                    // tabbar 页且之前出现过，直接复用
-                    var prev$1 = stacks[prevIndex$1];
-                    return showPage(prev$1, pageConfig, prevIndex$1);
+                    // NOTE: tabbar 页且之前出现过，直接复用
+                    return handler.show(stacks.getItem(prevIndex$1), pageConfig, prevIndex$1);
                 }
             }
-            else {
-                unloadPage(runtime.Current.page);
+            else if (action === 'REPLACE') {
+                var delta$1 = stacks.getDelta(pathname);
+                // NOTE: 页面路由记录并不会清空，只是移除掉缓存的 stack 以及页面
+                handler.unload(currentPage, delta$1);
+            }
+            else if (action === 'PUSH') {
+                handler.hide(currentPage);
             }
             shouldLoad = true;
         }
-        if (shouldLoad) {
+        if (shouldLoad || stacks.length < 1) {
             var el = (_c = element.default) !== null && _c !== void 0 ? _c : element;
             var loadConfig = Object.assign({}, pageConfig);
+            var stacksIndex = stacks.length;
             delete loadConfig['path'];
             delete loadConfig['load'];
-            var pathname$1 = stripBasename(config.router.pathname, basename);
-            var routerIndex = stacks.length;
-            var page = runtime.createPageConfig(enablePullDownRefresh ? (_d = runtimeHooks.createPullDownComponent) === null || _d === void 0 ? void 0 : _d.call(runtimeHooks, el, location.pathname, framework, routerConfig.PullDownRefresh) : el, pathname$1 + runtime.stringify(qs(routerIndex)), {}, loadConfig);
-            loadPage(page, pageConfig, routerIndex);
+            var page = runtime.createPageConfig(enablePullDownRefresh ? (_d = runtimeHooks.createPullDownComponent) === null || _d === void 0 ? void 0 : _d.call(runtimeHooks, el, location.pathname, framework, handler.PullDownRefresh) : el, pathname + runtime.stringify(handler.getQuery(stacksIndex)), {}, loadConfig);
+            return handler.load(page, pageConfig, stacksIndex);
         }
-    }, 500);
+    };
     if (exports.history.location.pathname === '/') {
-        exports.history.replace(prependBasename(routes[0].path + exports.history.location.search));
+        exports.history.replace(prependBasename(entryPagePath + exports.history.location.search));
     }
     render({ location: exports.history.location, action: r.Push });
-    app.onShow(qs(stacks.length));
+    app.onShow(handler.getQuery(stacks.length));
     return exports.history.listen(render);
 }