@tarojs/router 3.3.15 → 3.3.19

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) {
@@ -57,8 +58,18 @@ function prependBasename(url) {
 
     return basename.replace(/\/$/, '') + '/' + url.replace(/^\//, '');
 }
-var hasBasename = function (path, prefix) { return new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path); };
-var stripBasename = function (path, prefix) { return hasBasename(path, prefix) ? path.substr(prefix.length) : path; };
+var hasBasename = function (path, prefix) {
+    if ( path === void 0 ) path = '';
+    if ( prefix === void 0 ) prefix = '';
+
+    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 = [];
@@ -70,9 +81,12 @@ prototypeAccessors.delta.set = function (delta) {
     if (delta > 0) {
         this.backDelta = delta;
     }
-    else {
+    else if (this.backDelta > 0) {
         --this.backDelta;
     }
+    else {
+        this.backDelta = 0;
+    }
 };
 prototypeAccessors.length.get = function () {
     return this.stacks.length;
@@ -86,16 +100,28 @@ Stacks.prototype.get = function get () {
 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;
     }
+    var index = this.getLastIndex(pathname);
     // NOTE: 此处为了修复浏览器后退多级页面，在大量重复路由状况下可能出现判断错误的情况 （增强判断能力只能考虑在 query 中新增参数来判断，暂时搁置）
-    var prevIndex = this.stacks.findIndex(function (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;
 };
-Stacks.prototype.getPrevIndex = function getPrevIndex (pathname) {
-    return this.length - 1 - this.getDelta(pathname);
+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();
@@ -107,40 +133,72 @@ Stacks.prototype.push = function 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;
 }
-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; });
-};
+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]);
+    };
+};
+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('/');
@@ -166,9 +224,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 {
@@ -178,7 +237,11 @@ 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);
                 }
             }
@@ -188,9 +251,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);
+            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);
         }
     });
 }
@@ -209,15 +273,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.get();
+    var pages = stacks.get();
+    return pages.map(function (e) { return (Object.assign(Object.assign({}, e), { route: e.path || '' })); });
 }
 
 /**
@@ -863,108 +926,6 @@ var UniversalRouter = function () {
 
 UniversalRouter.pathToRegexp = pathToRegexp_1;
 
-var Taro = require('@tarojs/taro-h5');
-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';
-    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);
-    Taro.initTabBarApis(config);
-}
-
-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);
-}
-
-var pageScrollFn;
-var pageDOM = window;
-function bindPageScroll(page, config) {
-    pageDOM.removeEventListener('scroll', pageScrollFn);
-    pageDOM = getScrollContainer();
-    var distance = config.onReachBottomDistance || 50;
-    var 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', 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)) {
-        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;
 }
@@ -1521,9 +1482,171 @@ var queryString_5 = queryString.stringifyUrl;
 var queryString_6 = queryString.pick;
 var queryString_7 = queryString.exclude;
 
-function getSearch() {
+var pageScrollFn;
+var pageDOM = window;
+function bindPageScroll(page, config) {
+    pageDOM.removeEventListener('scroll', pageScrollFn);
+    pageDOM = getScrollContainer();
+    var distance = config.onReachBottomDistance || 50;
+    var 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', function (e) {
+    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() {
+    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) {
+        return document.documentElement.scrollHeight - window.scrollY - window.innerHeight;
+    }
+    else {
+        return pageDOM.scrollHeight - pageDOM.scrollTop - pageDOM.clientHeight;
+    }
+}
+
+/**
+ * 插入页面动画需要的样式
+ */
+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;
+    }
+}
+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;
+
+    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 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 (routerConfig.router.mode === 'hash') {
+    if (this.routerMode) {
         var idx = location.hash.indexOf('?');
         if (idx > -1) {
             search = location.hash.slice(idx);
@@ -1533,11 +1656,11 @@ function getSearch() {
         search = location.search;
     }
     return search.substr(1);
-}
-var qs = function (stamp) {
-    if ( stamp === void 0 ) stamp = 0;
+};
+PageHandler.prototype.getQuery = function getQuery (stamp) {
+        if ( stamp === void 0 ) stamp = 0;
 
-    var search = getSearch();
+    var search = this.search;
     var query = search
         ? queryString.parse(search)
         : {};
@@ -1545,116 +1668,199 @@ var qs = function (stamp) {
         query.stamp = stamp.toString();
     }
     return query;
-};
-
-/* eslint-disable dot-notation */
-function pageOnReady(page, onLoad) {
-    if ( onLoad === void 0 ) onLoad = true;
-
+};
+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;
-        (_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();
+                var _a;
+                (_a = page.onReady) === null || _a === void 0 ? void 0 : _a.call(page);
                 pageEl['__isReady'] = true;
             });
         });
         onLoad && (pageEl['__page'] = page);
     }
-}
-function loadPage(page, pageConfig, stacksIndex) {
-    if ( pageConfig === void 0 ) pageConfig = {};
-    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;
 
+    var _a;
     if (!page)
         { return; }
     var pageEl = document.getElementById(page.path);
     if (pageEl) {
-        pageEl.style.display = 'block';
+        setDisplay(pageEl);
+        this.isTabBar && pageEl.classList.add('taro_tabbar_page');
+        this.addAnimation(pageEl, stacksIndex === 0);
     }
     else {
-        page.onLoad(qs(stacksIndex), function () { return pageOnReady(page, true); });
+        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();
+    (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
     bindPageScroll(page, pageConfig);
-}
-function unloadPage(page, delta) {
-    if ( delta === void 0 ) delta = 1;
+};
+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();
-    page.onUnload();
+    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;
+        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);
+    }
+    else {
+        var pageEl$1 = document.getElementById(page.path);
+        pageEl$1 === null || pageEl$1 === void 0 ? void 0 : pageEl$1.classList.remove('taro_page_show');
+        page === null || page === void 0 ? void 0 : page.onUnload();
+    }
     if (delta >= 1)
-        { unloadPage(stacks.last, delta); }
-}
-function showPage(page, pageConfig, stacksIndex) {
-    if ( pageConfig === void 0 ) pageConfig = {};
-    if ( stacksIndex === void 0 ) stacksIndex = 0;
+        { 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;
 
+    var _a;
     if (!page)
         { return; }
-    page.onShow();
+    (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
     var pageEl = document.getElementById(page.path);
     if (pageEl) {
-        pageEl.style.display = 'block';
+        setDisplay(pageEl);
+        this.addAnimation(pageEl, stacksIndex === 0);
     }
     else {
-        page.onLoad(qs(stacksIndex), function () { return pageOnReady(page, false); });
+        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);
-}
-function hidePage(page) {
+};
+PageHandler.prototype.hide = function hide (page) {
+        var this$1 = this;
+
+    var _a;
     if (!page)
         { return; }
     // NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
     var pageEl = document.getElementById(page.path);
     if (pageEl) {
-        pageEl.style.display = 'none';
-        page.onHide();
+        if (this.hideTimer) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+            setDisplay(this.lastHidePage, 'none');
+        }
+        this.lastHidePage = pageEl;
+        this.hideTimer = setTimeout(function () {
+            this$1.hideTimer = null;
+            setDisplay(this$1.lastHidePage, 'none');
+        }, this.animationDelay);
+        (_a = page.onHide) === null || _a === void 0 ? void 0 : _a.call(page);
     }
     else {
-        setTimeout(function () { return hidePage(page); }, 0);
+        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 _a, _b, _c;
+    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();
+    (_b = app.onLaunch) === null || _b === void 0 ? void 0 : _b.call(app);
     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 {
@@ -1663,14 +1869,11 @@ 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) {
@@ -1678,53 +1881,56 @@ function createRouter(app, config, framework) {
             enablePullDownRefresh = pageConfig.enablePullDownRefresh;
         }
         var currentPage = runtime.Current.page;
-        var pathname = location.pathname;
+        var pathname = handler.pathname;
         var shouldLoad = false;
         if (action === 'POP') {
             // NOTE: 浏览器事件退后多次时，该事件只会被触发一次
             var prevIndex = stacks.getPrevIndex(pathname);
             var 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);
-                var prevIndex$1 = stacks.getPrevIndex(pathname);
+        else {
+            if (handler.isTabBar) {
+                if (handler.isSamePage(currentPage))
+                    { return; }
+                var prevIndex$1 = stacks.getPrevIndex(pathname, 0);
+                handler.hide(currentPage);
                 if (prevIndex$1 > -1) {
                     // NOTE: tabbar 页且之前出现过，直接复用
-                    return showPage(stacks.getItem(prevIndex$1), pageConfig, prevIndex$1);
+                    return handler.show(stacks.getItem(prevIndex$1), pageConfig, prevIndex$1);
                 }
             }
-            else {
-                unloadPage(currentPage);
+            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 page = runtime.createPageConfig(enablePullDownRefresh ? (_d = runtimeHooks.createPullDownComponent) === null || _d === void 0 ? void 0 : _d.call(runtimeHooks, el, location.pathname, framework, routerConfig.PullDownRefresh) : el, pathname + runtime.stringify(qs(stacksIndex)), {}, loadConfig);
-            return loadPage(page, pageConfig, stacksIndex);
+            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);
         }
     };
     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));
+    (_c = app.onShow) === null || _c === void 0 ? void 0 : _c.call(app, handler.getQuery(stacks.length));
     return exports.history.listen(render);
 }