@tarojs/router 3.4.0-beta.0 → 3.4.0

package/dist/router.esm.js

@@ -1,15 +1,16 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import { requestAnimationFrame, container, SERVICE_IDENTIFIER, eventCenter, createPageConfig, stringify, Current } from '@tarojs/runtime';
+import { Current, requestAnimationFrame, container, SERVICE_IDENTIFIER, createPageConfig, stringify, eventCenter } from '@tarojs/runtime';
 import _typeof from '@babel/runtime/helpers/typeof';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _createForOfIteratorHelper from '@babel/runtime/helpers/createForOfIteratorHelper';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { initTabBarApis } from '@tarojs/taro';
 
 var r,
     B = r || (r = {});
@@ -439,10 +440,14 @@ function prependBasename() {
   var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return basename.replace(/\/$/, '') + '/' + url.replace(/^\//, '');
 }
-var hasBasename = function hasBasename(path, prefix) {
+var hasBasename = function hasBasename() {
+  var path = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   return new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path);
 };
-var stripBasename = function stripBasename(path, prefix) {
+var stripBasename = function stripBasename() {
+  var path = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   return hasBasename(path, prefix) ? path.substr(prefix.length) : path;
 };
 
@@ -460,8 +465,10 @@ var Stacks = /*#__PURE__*/function () {
     set: function set(delta) {
       if (delta > 0) {
         this.backDelta = delta;
-      } else {
+      } else if (this.backDelta > 0) {
         --this.backDelta;
+      } else {
+        this.backDelta = 0;
       }
     }
   }, {
@@ -484,25 +491,41 @@ var Stacks = /*#__PURE__*/function () {
     value: function getItem(index) {
       return this.stacks[index];
     }
+  }, {
+    key: "getLastIndex",
+    value: function getLastIndex(pathname) {
+      var stateWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+
+      var list = _toConsumableArray(this.stacks).reverse();
+
+      return list.findIndex(function (page, i) {
+        var _page$path;
+
+        return i >= stateWith && ((_page$path = page.path) === null || _page$path === void 0 ? void 0 : _page$path.replace(/\?.*/g, '')) === pathname;
+      });
+    }
   }, {
     key: "getDelta",
     value: function getDelta(pathname) {
       if (this.backDelta >= 1) {
         return this.backDelta;
-      } // NOTE: 此处为了修复浏览器后退多级页面，在大量重复路由状况下可能出现判断错误的情况 （增强判断能力只能考虑在 query 中新增参数来判断，暂时搁置）
-
+      }
 
-      var prevIndex = this.stacks.findIndex(function (r) {
-        var _r$path;
+      var index = this.getLastIndex(pathname); // NOTE: 此处为了修复浏览器后退多级页面，在大量重复路由状况下可能出现判断错误的情况 （增强判断能力只能考虑在 query 中新增参数来判断，暂时搁置）
 
-        return ((_r$path = r.path) === null || _r$path === void 0 ? void 0 : _r$path.replace(/\?.*/g, '')) === pathname;
-      });
-      return this.length - 1 - prevIndex;
+      return index > 0 ? index : 1;
     }
   }, {
     key: "getPrevIndex",
     value: function getPrevIndex(pathname) {
-      return this.length - 1 - this.getDelta(pathname);
+      var stateWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+      var lastIndex = this.getLastIndex(pathname, stateWith);
+
+      if (lastIndex < 0) {
+        return -1;
+      }
+
+      return this.length - 1 - lastIndex;
     }
   }, {
     key: "pop",
@@ -521,48 +544,98 @@ var Stacks = /*#__PURE__*/function () {
 
 var stacks = new Stacks();
 
-var routesAlias = {};
-function setRoutesAlias(alias) {
-  routesAlias = alias;
-}
 function addLeadingSlash(path) {
   if (path == null) {
     return '';
   }
 
   return path.charAt(0) === '/' ? path : '/' + path;
-} // eslint-disable-next-line @typescript-eslint/ban-types
-var isTabBar = function isTabBar(config) {
-  var _Object$entries$find, _config$tabBar;
-
-  var _config$router = config.router,
-      _config$router$custom = _config$router.customRoutes,
-      customRoutes = _config$router$custom === void 0 ? {} : _config$router$custom,
-      _config$router$basena = _config$router.basename,
-      basename = _config$router$basena === void 0 ? '' : _config$router$basena,
-      pathname = _config$router.pathname;
-  var routePath = stripBasename(pathname, basename);
-  var pagePath = ((_Object$entries$find = Object.entries(customRoutes).find(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        target = _ref2[1];
-
-    return target === routePath;
-  })) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[0]) || routePath;
-  return !!pagePath && (((_config$tabBar = config.tabBar) === null || _config$tabBar === void 0 ? void 0 : _config$tabBar.list) || []).some(function (t) {
-    return t.pagePath === pagePath;
-  });
-};
+}
+
+var RoutesAlias = /*#__PURE__*/function () {
+  function RoutesAlias() {
+    var _this = this;
+
+    _classCallCheck(this, RoutesAlias);
+
+    _defineProperty(this, "conf", []);
+
+    _defineProperty(this, "getConfig", function () {
+      var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
+      var customRoute = _this.conf.filter(function (arr) {
+        return arr.includes(url);
+      });
+
+      return customRoute[0];
+    });
+
+    _defineProperty(this, "getOrigin", function () {
+      var _this$getConfig;
+
+      var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      return ((_this$getConfig = _this.getConfig(url)) === null || _this$getConfig === void 0 ? void 0 : _this$getConfig[0]) || url;
+    });
+
+    _defineProperty(this, "getAlias", function () {
+      var _this$getConfig2;
+
+      var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      return ((_this$getConfig2 = _this.getConfig(url)) === null || _this$getConfig2 === void 0 ? void 0 : _this$getConfig2[1]) || url;
+    });
+
+    _defineProperty(this, "getAll", function () {
+      var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      return _this.conf.filter(function (arr) {
+        return arr.includes(url);
+      }).reduce(function (p, a) {
+        p.push(a[1]);
+        return p;
+      }, [url]);
+    });
+  }
+
+  _createClass(RoutesAlias, [{
+    key: "set",
+    value: function set() {
+      var _this2 = this;
+
+      var customRoutes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      var _loop = function _loop(_key) {
+        var path = customRoutes[_key];
+        _key = addLeadingSlash(_key);
+
+        if (typeof path === 'string') {
+          _this2.conf.push([_key, addLeadingSlash(path)]);
+        } else if ((path === null || path === void 0 ? void 0 : path.length) > 0) {
+          var _this2$conf;
+
+          (_this2$conf = _this2.conf).push.apply(_this2$conf, _toConsumableArray(path.map(function (p) {
+            return [_key, addLeadingSlash(p)];
+          })));
+        }
+
+        key = _key;
+      };
+
+      for (var key in customRoutes) {
+        _loop(key);
+      }
+    }
+  }]);
+
+  return RoutesAlias;
+}();
+
+var routesAlias = new RoutesAlias();
 
 function processNavigateUrl(option) {
   var _pathPieces$pathname;
 
   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 (pathPieces !== null && pathPieces !== void 0 && (_pathPieces$pathname = pathPieces.pathname) !== null && _pathPieces$pathname !== void 0 && _pathPieces$pathname.includes('./')) {
     var parts = history.location.pathname.split('/');
@@ -599,9 +672,12 @@ function _navigate() {
                   complete = option.complete,
                   fail = option.fail;
               var unListen = history.listen(function () {
-                success === null || success === void 0 ? void 0 : success();
-                complete === null || complete === void 0 ? void 0 : complete();
-                resolve();
+                var res = {
+                  errMsg: "".concat(method, ":ok")
+                };
+                success === null || success === void 0 ? void 0 : success(res);
+                complete === null || complete === void 0 ? void 0 : complete(res);
+                resolve(res);
                 unListen();
               });
 
@@ -614,7 +690,10 @@ function _navigate() {
 
                   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);
                   }
                 } else if (method === 'navigateBack') {
@@ -622,9 +701,12 @@ function _navigate() {
                   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: "".concat(method, ":fail ").concat(error.message || error)
+                };
+                fail === null || fail === void 0 ? void 0 : fail(res);
+                complete === null || complete === void 0 ? void 0 : complete(res);
+                reject(res);
               }
             }));
 
@@ -656,15 +738,18 @@ function navigateBack() {
   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 _objectSpread(_objectSpread({}, e), {}, {
+      route: e.path || ''
+    });
+  });
 }
 
 var pathToRegexp$2 = {exports: {}};
@@ -1297,117 +1382,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 = history.location.pathname === '/' ? homePage : 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 _document$getElementB;
-
-  config.router.mode = config.router.mode || 'hash';
-  setHistoryMode(config.router.mode, config.router.basename);
-  Object.assign(routerConfig, config);
-  (_document$getElementB = document.getElementById('app')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.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 pageScrollFn() {
-    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 _e$target;
-
-  // @ts-ignore
-  var className = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.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;
-  }
-}
-
 var queryString = {};
 
 var strictUriEncode = function strictUriEncode(str) {
@@ -1972,147 +1946,540 @@ var filterObj = function filterObj(obj, predicate) {
   };
 })(queryString);
 
-function getSearch() {
-  var search = '?';
+var pageScrollFn;
+var pageDOM = window;
+function bindPageScroll(page, pageEl, config) {
+  pageEl.removeEventListener('scroll', pageScrollFn);
+  pageDOM = pageEl;
+  var distance = config.onReachBottomDistance || 50;
+  var isReachBottom = false;
 
-  if (routerConfig.router.mode === 'hash') {
-    var idx = location.hash.indexOf('?');
+  pageScrollFn = function pageScrollFn() {
+    page.onPageScroll && page.onPageScroll({
+      scrollTop: pageDOM instanceof Window ? window.scrollY : pageDOM.scrollTop
+    });
 
-    if (idx > -1) {
-      search = location.hash.slice(idx);
+    if (isReachBottom && getOffset() > distance) {
+      isReachBottom = false;
     }
+
+    if (page.onReachBottom && !isReachBottom && getOffset() < distance) {
+      isReachBottom = true;
+      page.onReachBottom();
+    }
+  };
+
+  pageDOM.addEventListener('scroll', pageScrollFn, false);
+}
+
+function getOffset() {
+  if (pageDOM instanceof Window) {
+    return document.documentElement.scrollHeight - window.scrollY - window.innerHeight;
   } else {
-    search = location.search;
+    return pageDOM.scrollHeight - pageDOM.scrollTop - pageDOM.clientHeight;
   }
+}
+
+var pageResizeFn;
+function bindPageResize(page) {
+  window.removeEventListener('resize', pageResizeFn);
 
-  return search.substr(1);
+  pageResizeFn = function pageResizeFn() {
+    page.onResize && page.onResize({
+      size: {
+        windowHeight: window.innerHeight,
+        windowWidth: window.innerWidth
+      }
+    });
+  };
+
+  window.addEventListener('resize', pageResizeFn, false);
 }
 
-var qs = function qs() {
-  var stamp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var search = getSearch();
-  var query = search ? queryString.parse(search) : {};
+function bindPageEvents(page, pageEl) {
+  var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-  if (stamp) {
-    query.stamp = stamp.toString();
+  if (!pageEl) {
+    pageEl = getPageContainer();
   }
 
-  return query;
-};
+  bindPageScroll(page, pageEl, config);
+  bindPageResize(page);
+}
 
-/* eslint-disable dot-notation */
-function pageOnReady(page) {
-  var onLoad = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var pageEl = document.getElementById(page.path);
+function getPageContainer() {
+  var _Current$page;
 
-  if (pageEl && !(pageEl !== null && pageEl !== void 0 && pageEl['__isReady'])) {
-    var _el$componentOnReady;
+  var id = (_Current$page = Current.page) === null || _Current$page === void 0 ? void 0 : _Current$page.path;
+  var el = id ? document.getElementById(id) : document.querySelector('.taro_page') || document.querySelector('.taro_router');
+  return el || window;
+}
 
-    var el = pageEl.firstElementChild;
-    el === null || el === void 0 ? void 0 : (_el$componentOnReady = el['componentOnReady']) === null || _el$componentOnReady === void 0 ? void 0 : _el$componentOnReady.call(el).then(function () {
-      requestAnimationFrame(function () {
-        page.onReady();
-        pageEl['__isReady'] = true;
-      });
-    });
-    onLoad && (pageEl['__page'] = page);
-  }
+/**
+ * 插入页面动画需要的样式
+ */
+function loadAnimateStyle() {
+  var ms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 300;
+  var css = "\n.taro_router .taro_page {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #fff;\n  transform: translate(100%, 0);\n  transition: transform ".concat(ms, "ms;\n}\n\n.taro_router .taro_page.taro_tabbar_page,\n.taro_router .taro_page.taro_page_show.taro_page_stationed {\n  transform: none;\n}\n\n.taro_router .taro_page.taro_page_show {\n  transform: translate(0, 0);\n}");
+  var style = document.createElement('style');
+  style.innerHTML = css;
+  document.getElementsByTagName('head')[0].appendChild(style);
 }
-function loadPage(page) {
-  var pageConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var stacksIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  if (!page) return;
-  var pageEl = document.getElementById(page.path);
-
-  if (pageEl) {
-    pageEl.style.display = 'block';
+
+// @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 = history.location.pathname === '/' ? homePage : 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 {
-    page.onLoad(qs(stacksIndex), function () {
-      return pageOnReady(page, true);
-    });
+    tabbar.conf.custom = false;
+    tabbar.conf.customRoutes = {};
   }
 
-  stacks.push(page);
-  page.onShow();
-  bindPageScroll(page, pageConfig);
-}
-function unloadPage(page) {
-  var delta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  if (!page) return;
-  stacks.delta = --delta;
-  stacks.pop();
-  page.onUnload();
-  if (delta >= 1) unloadPage(stacks.last, delta);
-}
-function showPage(page) {
-  var pageConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var stacksIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  if (!page) return;
-  page.onShow();
-  var pageEl = document.getElementById(page.path);
-
-  if (pageEl) {
-    pageEl.style.display = 'block';
-  } else {
-    page.onLoad(qs(stacksIndex), function () {
-      return pageOnReady(page, false);
-    });
+  if (typeof routerConfig.basename !== 'undefined') {
+    tabbar.conf.basename = routerConfig.basename;
   }
 
-  bindPageScroll(page, pageConfig);
+  var container = document.getElementById('container');
+  container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
+  initTabBarApis(config);
 }
-function hidePage(page) {
-  if (!page) return; // NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
 
-  var pageEl = document.getElementById(page.path);
+function setDisplay(el) {
+  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
 
-  if (pageEl) {
-    pageEl.style.display = 'none';
-    page.onHide();
-  } else {
-    setTimeout(function () {
-      return hidePage(page);
-    }, 0);
+  if (el) {
+    el.style.display = type;
   }
 }
 
-function createRouter(app, config, framework) {
-  var _config$router$custom;
+var PageHandler = /*#__PURE__*/function () {
+  function PageHandler(config) {
+    _classCallCheck(this, PageHandler);
 
-  init(config);
-  var routes = [];
-  var alias = (_config$router$custom = config.router.customRoutes) !== null && _config$router$custom !== void 0 ? _config$router$custom : {};
-  var runtimeHooks = container.get(SERVICE_IDENTIFIER.Hooks);
-  setRoutesAlias(alias);
+    _defineProperty(this, "config", void 0);
 
-  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
+    _defineProperty(this, "defaultAnimation", {
+      duration: 300,
+      delay: 50
     });
+
+    _defineProperty(this, "unloadTimer", void 0);
+
+    _defineProperty(this, "hideTimer", void 0);
+
+    _defineProperty(this, "lastHidePage", void 0);
+
+    _defineProperty(this, "lastUnloadPage", void 0);
+
+    this.config = config;
+    this.mount();
   }
 
-  var basename = config.router.basename;
+  _createClass(PageHandler, [{
+    key: "appId",
+    get: function get() {
+      return 'app';
+    }
+  }, {
+    key: "router",
+    get: function get() {
+      return this.config.router;
+    }
+  }, {
+    key: "routerMode",
+    get: function get() {
+      return this.router.mode || 'hash';
+    }
+  }, {
+    key: "customRoutes",
+    get: function get() {
+      return this.router.customRoutes || {};
+    }
+  }, {
+    key: "routes",
+    get: function get() {
+      return this.config.routes;
+    }
+  }, {
+    key: "tabBarList",
+    get: function get() {
+      var _this$config$tabBar;
+
+      return ((_this$config$tabBar = this.config.tabBar) === null || _this$config$tabBar === void 0 ? void 0 : _this$config$tabBar.list) || [];
+    }
+  }, {
+    key: "PullDownRefresh",
+    get: function get() {
+      return this.config.PullDownRefresh;
+    }
+  }, {
+    key: "animation",
+    get: function get() {
+      var _this$config$animatio, _this$config;
+
+      return (_this$config$animatio = (_this$config = this.config) === null || _this$config === void 0 ? void 0 : _this$config.animation) !== null && _this$config$animatio !== void 0 ? _this$config$animatio : this.defaultAnimation;
+    }
+  }, {
+    key: "animationDelay",
+    get: function get() {
+      var _this$defaultAnimatio;
+
+      return (_typeof(this.animation) === 'object' ? this.animation.delay : this.animation ? (_this$defaultAnimatio = this.defaultAnimation) === null || _this$defaultAnimatio === void 0 ? void 0 : _this$defaultAnimatio.delay : 0) || 0;
+    }
+  }, {
+    key: "animationDuration",
+    get: function get() {
+      var _this$defaultAnimatio2;
+
+      return (_typeof(this.animation) === 'object' ? this.animation.duration : this.animation ? (_this$defaultAnimatio2 = this.defaultAnimation) === null || _this$defaultAnimatio2 === void 0 ? void 0 : _this$defaultAnimatio2.duration : 0) || 0;
+    }
+  }, {
+    key: "pathname",
+    get: function get() {
+      return this.router.pathname;
+    },
+    set: function set(p) {
+      this.router.pathname = p;
+    }
+  }, {
+    key: "basename",
+    get: function get() {
+      return this.router.basename || '';
+    }
+  }, {
+    key: "pageConfig",
+    get: function get() {
+      var _this = this;
+
+      return this.routes.find(function (r) {
+        var _routesAlias$getConfi;
+
+        var routePath = stripBasename(_this.pathname, _this.basename);
+        var pagePath = addLeadingSlash(r.path);
+        return pagePath === routePath || ((_routesAlias$getConfi = routesAlias.getConfig(pagePath)) === null || _routesAlias$getConfi === void 0 ? void 0 : _routesAlias$getConfi.includes(routePath));
+      });
+    }
+  }, {
+    key: "isTabBar",
+    get: function get() {
+      var _Object$entries$find;
+
+      var routePath = stripBasename(this.pathname, this.basename);
+      var pagePath = ((_Object$entries$find = Object.entries(this.customRoutes).find(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            target = _ref2[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 || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[0]) || routePath;
+      return !!pagePath && this.tabBarList.some(function (t) {
+        return t.pagePath === pagePath;
+      });
+    }
+  }, {
+    key: "isSamePage",
+    value: 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 + '?');
+    }
+  }, {
+    key: "search",
+    get: function get() {
+      var search = '?';
+
+      if (this.routerMode === 'hash') {
+        var idx = location.hash.indexOf('?');
+
+        if (idx > -1) {
+          search = location.hash.slice(idx);
+        }
+      } else {
+        search = location.search;
+      }
+
+      return search.substr(1);
+    }
+  }, {
+    key: "getQuery",
+    value: function getQuery() {
+      var stamp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var search = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      search = search ? "".concat(search, "&").concat(this.search) : this.search;
+      var query = search ? queryString.parse(search) : {};
+      query.stamp = stamp.toString();
+      return _objectSpread(_objectSpread({}, query), options);
+    }
+  }, {
+    key: "mount",
+    value: function mount() {
+      var _document$getElementB;
+
+      setHistoryMode(this.routerMode, this.router.basename);
+      (_document$getElementB = document.getElementById('app')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.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);
+      }
+    }
+  }, {
+    key: "onReady",
+    value: function onReady(page) {
+      var onLoad = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var pageEl = document.getElementById(page.path);
+
+      if (pageEl && !(pageEl !== null && pageEl !== void 0 && pageEl['__isReady'])) {
+        var _el$componentOnReady, _el$componentOnReady$;
+
+        var el = pageEl.firstElementChild;
+        el === null || el === void 0 ? void 0 : (_el$componentOnReady = el['componentOnReady']) === null || _el$componentOnReady === void 0 ? void 0 : (_el$componentOnReady$ = _el$componentOnReady.call(el)) === null || _el$componentOnReady$ === void 0 ? void 0 : _el$componentOnReady$.then(function () {
+          requestAnimationFrame(function () {
+            var _page$onReady;
+
+            (_page$onReady = page.onReady) === null || _page$onReady === void 0 ? void 0 : _page$onReady.call(page);
+            pageEl['__isReady'] = true;
+          });
+        });
+        onLoad && (pageEl['__page'] = page);
+      }
+    }
+  }, {
+    key: "load",
+    value: function load(page) {
+      var _this2 = this;
+
+      var pageConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var stacksIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      if (!page) return; // NOTE: 页面栈推入太晚可能导致 getCurrentPages 无法获取到当前页面实例
+
+      stacks.push(page);
+      var param = this.getQuery(stacks.length, '', page.options);
+      var pageEl = document.getElementById(page.path);
+
+      if (pageEl) {
+        var _page$onShow;
+
+        setDisplay(pageEl);
+        this.isTabBar && pageEl.classList.add('taro_tabbar_page');
+        this.addAnimation(pageEl, stacksIndex === 0);
+        (_page$onShow = page.onShow) === null || _page$onShow === void 0 ? void 0 : _page$onShow.call(page);
+        bindPageEvents(page, pageEl, pageConfig);
+      } else {
+        var _page$onLoad;
+
+        (_page$onLoad = page.onLoad) === null || _page$onLoad === void 0 ? void 0 : _page$onLoad.call(page, param, function () {
+          var _pageEl, _page$onShow2;
+
+          pageEl = document.getElementById(page.path);
+          _this2.isTabBar && ((_pageEl = pageEl) === null || _pageEl === void 0 ? void 0 : _pageEl.classList.add('taro_tabbar_page'));
+
+          _this2.addAnimation(pageEl, stacksIndex === 0);
+
+          _this2.onReady(page, true);
+
+          (_page$onShow2 = page.onShow) === null || _page$onShow2 === void 0 ? void 0 : _page$onShow2.call(page);
+          bindPageEvents(page, pageEl, pageConfig);
+        });
+      }
+    }
+  }, {
+    key: "unload",
+    value: function unload(page) {
+      var _this3 = this;
+
+      var delta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+      var top = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      if (!page) return;
+      stacks.delta = --delta;
+      stacks.pop();
+
+      if (this.animation && top) {
+        if (this.unloadTimer) {
+          var _this$lastUnloadPage, _this$lastUnloadPage$;
+
+          clearTimeout(this.unloadTimer);
+          (_this$lastUnloadPage = this.lastUnloadPage) === null || _this$lastUnloadPage === void 0 ? void 0 : (_this$lastUnloadPage$ = _this$lastUnloadPage.onUnload) === null || _this$lastUnloadPage$ === void 0 ? void 0 : _this$lastUnloadPage$.call(_this$lastUnloadPage);
+          this.unloadTimer = null;
+        }
+
+        this.lastUnloadPage = page;
+        var pageEl = document.getElementById(page.path);
+        pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.remove('taro_page_stationed');
+        pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.remove('taro_page_show');
+        this.unloadTimer = setTimeout(function () {
+          var _this3$lastUnloadPage, _this3$lastUnloadPage2;
+
+          _this3.unloadTimer = null;
+          (_this3$lastUnloadPage = _this3.lastUnloadPage) === null || _this3$lastUnloadPage === void 0 ? void 0 : (_this3$lastUnloadPage2 = _this3$lastUnloadPage.onUnload) === null || _this3$lastUnloadPage2 === void 0 ? void 0 : _this3$lastUnloadPage2.call(_this3$lastUnloadPage);
+        }, this.animationDuration);
+      } else {
+        var _page$onUnload;
+
+        var _pageEl2 = document.getElementById(page.path);
+
+        _pageEl2 === null || _pageEl2 === void 0 ? void 0 : _pageEl2.classList.remove('taro_page_stationed');
+        _pageEl2 === null || _pageEl2 === void 0 ? void 0 : _pageEl2.classList.remove('taro_page_show');
+        page === null || page === void 0 ? void 0 : (_page$onUnload = page.onUnload) === null || _page$onUnload === void 0 ? void 0 : _page$onUnload.call(page);
+      }
+
+      if (delta >= 1) this.unload(stacks.last, delta);
+    }
+  }, {
+    key: "show",
+    value: function show(page) {
+      var _this4 = this;
+
+      var pageConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var stacksIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      if (!page) return;
+      var param = this.getQuery(stacks.length, '', page.options);
+      var pageEl = document.getElementById(page.path);
+
+      if (pageEl) {
+        var _page$onShow3;
+
+        setDisplay(pageEl);
+        this.addAnimation(pageEl, stacksIndex === 0);
+        (_page$onShow3 = page.onShow) === null || _page$onShow3 === void 0 ? void 0 : _page$onShow3.call(page);
+        bindPageEvents(page, pageEl, pageConfig);
+      } else {
+        var _page$onLoad2;
+
+        (_page$onLoad2 = page.onLoad) === null || _page$onLoad2 === void 0 ? void 0 : _page$onLoad2.call(page, param, function () {
+          var _page$onShow4;
+
+          pageEl = document.getElementById(page.path);
+
+          _this4.addAnimation(pageEl, stacksIndex === 0);
+
+          _this4.onReady(page, false);
+
+          (_page$onShow4 = page.onShow) === null || _page$onShow4 === void 0 ? void 0 : _page$onShow4.call(page);
+          bindPageEvents(page, pageEl, pageConfig);
+        });
+      }
+    }
+  }, {
+    key: "hide",
+    value: function hide(page) {
+      var _this5 = this;
+
+      if (!page) return; // NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
+
+      var pageEl = document.getElementById(page.path);
+
+      if (pageEl) {
+        var _page$onHide;
+
+        if (this.hideTimer) {
+          clearTimeout(this.hideTimer);
+          this.hideTimer = null;
+          setDisplay(this.lastHidePage, 'none');
+        }
+
+        this.lastHidePage = pageEl;
+        this.hideTimer = setTimeout(function () {
+          _this5.hideTimer = null;
+          setDisplay(_this5.lastHidePage, 'none');
+        }, this.animationDuration + this.animationDelay);
+        (_page$onHide = page.onHide) === null || _page$onHide === void 0 ? void 0 : _page$onHide.call(page);
+      } else {
+        setTimeout(function () {
+          return _this5.hide(page);
+        }, 0);
+      }
+    }
+  }, {
+    key: "addAnimation",
+    value: function addAnimation(pageEl) {
+      var _this6 = this;
+
+      var first = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      if (!pageEl) return;
+
+      if (this.animation && !first) {
+        setTimeout(function () {
+          pageEl.classList.add('taro_page_show');
+          setTimeout(function () {
+            pageEl.classList.add('taro_page_stationed');
+          }, _this6.animationDuration);
+        }, this.animationDelay);
+      } else {
+        pageEl.classList.add('taro_page_show');
+        pageEl.classList.add('taro_page_stationed');
+      }
+    }
+  }]);
+
+  return PageHandler;
+}();
+
+function createRouter(app, config, framework) {
+  var _routes$0$path, _app$onLaunch, _app$onShow;
+
+  var handler = new PageHandler(config);
+  var runtimeHooks = container.get(SERVICE_IDENTIFIER.Hooks);
+  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 || ((_routes$0$path = routes[0].path) === null || _routes$0$path === void 0 ? void 0 : _routes$0$path[0]);
   var router = new UniversalRouter(routes, {
     baseUrl: basename || ''
   });
-  app.onLaunch();
+  var launchParam = handler.getQuery(stacks.length);
+  (_app$onLaunch = app.onLaunch) === null || _app$onLaunch === void 0 ? void 0 : _app$onLaunch.call(app, launchParam);
 
   var render = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
-      var location, action, element, _app$onPageNotFound, pageConfig, enablePullDownRefresh, _pageConfig$navigatio, currentPage, pathname, shouldLoad, prevIndex, delta, _prevIndex, _element$default, _runtimeHooks$createP, el, loadConfig, stacksIndex, page;
+      var location, action, element, _app$onPageNotFound, pageConfig, enablePullDownRefresh, _pageConfig$navigatio, currentPage, pathname, shouldLoad, prevIndex, delta, _prevIndex, _delta, _element$default, _runtimeHooks$createP, el, loadConfig, stacksIndex, page;
 
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               location = _ref.location, action = _ref.action;
-              routerConfig.router.pathname = location.pathname;
+              handler.pathname = location.pathname;
               _context.prev = 2;
               _context.next = 5;
-              return router.resolve(config.router.forcePath || location.pathname);
+              return router.resolve(handler.router.forcePath || handler.pathname);
 
             case 5:
               element = _context.sent;
@@ -2129,7 +2496,7 @@ function createRouter(app, config, framework) {
               }
 
               (_app$onPageNotFound = app.onPageNotFound) === null || _app$onPageNotFound === void 0 ? void 0 : _app$onPageNotFound.call(app, {
-                path: location.pathname
+                path: handler.pathname
               });
               _context.next = 15;
               break;
@@ -2146,14 +2513,11 @@ function createRouter(app, config, framework) {
               return _context.abrupt("return");
 
             case 17:
-              pageConfig = config.routes.find(function (r) {
-                var path = addLeadingSlash(r.path);
-                return path === location.pathname || alias[path] === location.pathname;
-              });
+              pageConfig = handler.pageConfig;
               enablePullDownRefresh = false;
               eventCenter.trigger('__taroRouterChange', {
                 toLocation: {
-                  path: location.pathname
+                  path: handler.pathname
                 }
               });
 
@@ -2163,7 +2527,7 @@ function createRouter(app, config, framework) {
               }
 
               currentPage = Current.page;
-              pathname = location.pathname;
+              pathname = handler.pathname;
               shouldLoad = false;
 
               if (!(action === 'POP')) {
@@ -2174,62 +2538,60 @@ function createRouter(app, config, framework) {
               // NOTE: 浏览器事件退后多次时，该事件只会被触发一次
               prevIndex = stacks.getPrevIndex(pathname);
               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;
               }
 
-              _context.next = 46;
+              _context.next = 42;
               break;
 
             case 31:
-              if (!(action === 'PUSH')) {
-                _context.next = 36;
+              if (!handler.isTabBar) {
+                _context.next = 40;
                 break;
               }
 
-              hidePage(currentPage);
-              shouldLoad = true;
-              _context.next = 46;
-              break;
-
-            case 36:
-              if (!(action === 'REPLACE')) {
-                _context.next = 46;
+              if (!handler.isSamePage(currentPage)) {
+                _context.next = 34;
                 break;
               }
 
-              if (!isTabBar(config)) {
-                _context.next = 44;
-                break;
-              }
+              return _context.abrupt("return");
 
-              hidePage(currentPage);
-              _prevIndex = stacks.getPrevIndex(pathname);
+            case 34:
+              _prevIndex = stacks.getPrevIndex(pathname, 0);
+              handler.hide(currentPage);
 
               if (!(_prevIndex > -1)) {
-                _context.next = 42;
+                _context.next = 38;
                 break;
               }
 
-              return _context.abrupt("return", showPage(stacks.getItem(_prevIndex), pageConfig, _prevIndex));
+              return _context.abrupt("return", handler.show(stacks.getItem(_prevIndex), pageConfig, _prevIndex));
 
-            case 42:
-              _context.next = 45;
+            case 38:
+              _context.next = 41;
               break;
 
-            case 44:
-              unloadPage(currentPage);
+            case 40:
+              if (action === 'REPLACE') {
+                _delta = stacks.getDelta(pathname); // NOTE: 页面路由记录并不会清空，只是移除掉缓存的 stack 以及页面
 
-            case 45:
+                handler.unload(currentPage, _delta);
+              } else if (action === 'PUSH') {
+                handler.hide(currentPage);
+              }
+
+            case 41:
               shouldLoad = true;
 
-            case 46:
-              if (!shouldLoad) {
-                _context.next = 54;
+            case 42:
+              if (!(shouldLoad || stacks.length < 1)) {
+                _context.next = 50;
                 break;
               }
 
@@ -2238,10 +2600,10 @@ function createRouter(app, config, framework) {
               stacksIndex = stacks.length;
               delete loadConfig['path'];
               delete loadConfig['load'];
-              page = createPageConfig(enablePullDownRefresh ? (_runtimeHooks$createP = runtimeHooks.createPullDownComponent) === null || _runtimeHooks$createP === void 0 ? void 0 : _runtimeHooks$createP.call(runtimeHooks, el, location.pathname, framework, routerConfig.PullDownRefresh) : el, pathname + stringify(qs(stacksIndex)), {}, loadConfig);
-              return _context.abrupt("return", loadPage(page, pageConfig, stacksIndex));
+              page = createPageConfig(enablePullDownRefresh ? (_runtimeHooks$createP = runtimeHooks.createPullDownComponent) === null || _runtimeHooks$createP === void 0 ? void 0 : _runtimeHooks$createP.call(runtimeHooks, el, location.pathname, framework, handler.PullDownRefresh) : el, pathname + stringify(handler.getQuery(stacksIndex)), {}, loadConfig);
+              return _context.abrupt("return", handler.load(page, pageConfig, stacksIndex));
 
-            case 54:
+            case 50:
             case "end":
               return _context.stop();
           }
@@ -2255,14 +2617,14 @@ function createRouter(app, config, framework) {
   }();
 
   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));
+  (_app$onShow = app.onShow) === null || _app$onShow === void 0 ? void 0 : _app$onShow.call(app, launchParam);
   return history.listen(render);
 }