@tarojs/router 3.5.7 → 3.5.9

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { createBrowserHistory, createHashHistory, Action, parsePath } from 'history';
-import { Current, eventCenter, createPageConfig, hooks, stringify, requestAnimationFrame } from '@tarojs/runtime';
+import { Current, incrementId, eventCenter, createPageConfig, hooks, stringify, requestAnimationFrame } from '@tarojs/runtime';
 import MobileDetect from 'mobile-detect';
 import queryString from 'query-string';
 import { initTabBarApis } from '@tarojs/taro';
@@ -202,6 +202,8 @@ class Stacks {
     constructor() {
         this.stacks = [];
         this.backDelta = 0;
+        this.tabs = {};
+        this.methodName = '';
     }
     set delta(delta) {
         if (delta > 0) {
@@ -217,6 +219,12 @@ class Stacks {
     get delta() {
         return this.backDelta;
     }
+    set method(methodName) {
+        this.methodName = methodName;
+    }
+    get method() {
+        return this.methodName;
+    }
     get length() {
         return this.stacks.length;
     }
@@ -254,6 +262,20 @@ class Stacks {
     push(page) {
         return this.stacks.push(page);
     }
+    getTabs() {
+        return this.tabs;
+    }
+    pushTab(path) {
+        this.tabs[path] = this.last;
+        this.pop();
+    }
+    popTab(path) {
+        this.push(this.tabs[path]);
+        delete this.tabs[path];
+    }
+    removeTab(path) {
+        delete this.tabs[path];
+    }
 }
 const stacks = new Stacks();
 
@@ -284,6 +306,7 @@ function processNavigateUrl(option) {
 function navigate(option, method) {
     return __awaiter(this, void 0, void 0, function* () {
         return new Promise((resolve, reject) => {
+            stacks.method = method;
             const { success, complete, fail } = option;
             const unListen = history.listen(() => {
                 const res = { errMsg: `${method}:ok` };
@@ -460,7 +483,7 @@ class MultiPageHandler {
         this.config = config;
         this.mount();
     }
-    get appId() { return 'app'; }
+    get appId() { return this.config.appId || 'app'; }
     get router() { return this.config.router || {}; }
     get routerMode() { return this.router.mode || 'hash'; }
     get customRoutes() { return this.router.customRoutes || {}; }
@@ -493,11 +516,13 @@ class MultiPageHandler {
         return Object.assign(Object.assign({}, query), options);
     }
     mount() {
-        var _a;
         setHistoryMode(this.routerMode, this.router.basename);
-        (_a = document.getElementById('app')) === null || _a === void 0 ? void 0 : _a.remove();
-        const app = document.createElement('div');
-        app.id = this.appId;
+        const appId = this.appId;
+        let app = document.getElementById(appId);
+        if (!app) {
+            app = document.createElement('div');
+            app.id = appId;
+        }
         app.classList.add('taro_router');
         if (this.tabBarList.length > 1) {
             const container = document.createElement('div');
@@ -560,6 +585,8 @@ class MultiPageHandler {
     }
 }
 
+const createStampId$1 = incrementId();
+const launchStampId$1 = createStampId$1();
 // TODO 支持多路由 (APP 生命周期仅触发一次)
 /** Note: 关于多页面应用
  * - 需要配置路由映射（根目录跳转、404 页面……）
@@ -575,7 +602,7 @@ function createMultiRouter(app, config, framework) {
         const handler = new MultiPageHandler(config);
         const launchParam = {
             path: config.pageName,
-            query: handler.getQuery(),
+            query: handler.getQuery(launchStampId$1),
             scene: 0,
             shareTicket: '',
             referrerInfo: {}
@@ -662,7 +689,7 @@ class PageHandler {
         this.homePage = this.getHomePage();
         this.mount();
     }
-    get appId() { return 'app'; }
+    get appId() { return this.config.appId || 'app'; }
     get router() { return this.config.router || {}; }
     get routerMode() { return this.router.mode || 'hash'; }
     get customRoutes() { return this.router.customRoutes || {}; }
@@ -698,9 +725,9 @@ class PageHandler {
             return [pagePath, homePage].includes(routePath) || ((_a = routesAlias.getConfig(pagePath)) === null || _a === void 0 ? void 0 : _a.includes(routePath));
         });
     }
-    get isTabBar() {
+    isTabBar(pathname) {
         var _a;
-        const routePath = addLeadingSlash(stripBasename(this.pathname, this.basename));
+        const routePath = addLeadingSlash(stripBasename(pathname, this.basename)).split('?')[0];
         const pagePath = ((_a = Object.entries(this.customRoutes).find(([, target]) => {
             if (typeof target === 'string') {
                 return target === routePath;
@@ -736,21 +763,23 @@ class PageHandler {
         }
         return search.substr(1);
     }
-    getQuery(stamp = 0, search = '', options = {}) {
+    getQuery(stamp = '', search = '', options = {}) {
         search = search ? `${search}&${this.search}` : this.search;
         const query = search
             ? queryString.parse(search, { decode: false })
             : {};
-        query.stamp = stamp.toString();
+        query.stamp = stamp;
         return Object.assign(Object.assign({}, query), options);
     }
     mount() {
-        var _a;
         setHistoryMode(this.routerMode, this.router.basename);
-        (_a = document.getElementById('app')) === null || _a === void 0 ? void 0 : _a.remove();
         this.animation && loadAnimateStyle(this.animationDuration);
-        const app = document.createElement('div');
-        app.id = this.appId;
+        const appId = this.appId;
+        let app = document.getElementById(appId);
+        if (!app) {
+            app = document.createElement('div');
+            app.id = appId;
+        }
         app.classList.add('taro_router');
         if (this.tabBarList.length > 1) {
             const container = document.createElement('div');
@@ -782,18 +811,18 @@ class PageHandler {
             onLoad && (pageEl['__page'] = page);
         }
     }
-    load(page, pageConfig = {}, stacksIndex = 0) {
+    load(page, pageConfig = {}, stampId, pageNo = 0) {
         var _a, _b;
         if (!page)
             return;
         // NOTE: 页面栈推入太晚可能导致 getCurrentPages 无法获取到当前页面实例
         stacks.push(page);
-        const param = this.getQuery(stacks.length, '', page.options);
+        const param = this.getQuery(stampId, '', page.options);
         let pageEl = this.getPageContainer(page);
         if (pageEl) {
             setDisplay(pageEl);
-            this.isTabBar && pageEl.classList.add('taro_tabbar_page');
-            this.addAnimation(pageEl, stacksIndex === 0);
+            this.isTabBar(this.pathname) && pageEl.classList.add('taro_tabbar_page');
+            this.addAnimation(pageEl, pageNo === 0);
             (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
             this.bindPageEvents(page, pageEl, pageConfig);
         }
@@ -801,8 +830,8 @@ class PageHandler {
             (_b = page.onLoad) === null || _b === void 0 ? void 0 : _b.call(page, param, () => {
                 var _a;
                 pageEl = this.getPageContainer(page);
-                this.isTabBar && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
-                this.addAnimation(pageEl, stacksIndex === 0);
+                this.isTabBar(this.pathname) && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
+                this.addAnimation(pageEl, pageNo === 0);
                 this.onReady(page, true);
                 (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
                 this.bindPageEvents(page, pageEl, pageConfig);
@@ -840,15 +869,15 @@ class PageHandler {
         if (delta >= 1)
             this.unload(stacks.last, delta);
     }
-    show(page, pageConfig = {}, stacksIndex = 0) {
+    show(page, pageConfig = {}, pageNo = 0) {
         var _a, _b;
         if (!page)
             return;
-        const param = this.getQuery(stacks.length, '', page.options);
+        const param = this.getQuery(page['$taroParams']['stamp'], '', page.options);
         let pageEl = this.getPageContainer(page);
         if (pageEl) {
             setDisplay(pageEl);
-            this.addAnimation(pageEl, stacksIndex === 0);
+            this.addAnimation(pageEl, pageNo === 0);
             (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
             this.bindPageEvents(page, pageEl, pageConfig);
         }
@@ -856,7 +885,7 @@ class PageHandler {
             (_b = page.onLoad) === null || _b === void 0 ? void 0 : _b.call(page, param, () => {
                 var _a;
                 pageEl = this.getPageContainer(page);
-                this.addAnimation(pageEl, stacksIndex === 0);
+                this.addAnimation(pageEl, pageNo === 0);
                 this.onReady(page, false);
                 (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
                 this.bindPageEvents(page, pageEl, pageConfig);
@@ -926,6 +955,8 @@ class PageHandler {
     }
 }
 
+const createStampId = incrementId();
+let launchStampId = createStampId();
 function createRouter(app, config, framework) {
     var _a, _b;
     RouterConfig.config = config;
@@ -943,7 +974,7 @@ function createRouter(app, config, framework) {
     const router = new UniversalRouter(routes, { baseUrl: basename || '' });
     const launchParam = {
         path: handler.homePage,
-        query: handler.getQuery(stacks.length),
+        query: handler.getQuery(launchStampId),
         scene: 0,
         shareTicket: '',
         referrerInfo: {}
@@ -952,7 +983,7 @@ function createRouter(app, config, framework) {
     (_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
     app.onError && window.addEventListener('error', e => { var _a; return (_a = app.onError) === null || _a === void 0 ? void 0 : _a.call(app, e.message); });
     const render = ({ location, action }) => __awaiter(this, void 0, void 0, function* () {
-        var _c, _d, _e, _f, _g;
+        var _c, _d, _e, _f, _g, _h;
         handler.pathname = decodeURI(location.pathname);
         eventCenter.trigger('__taroRouterChange', {
             toLocation: {
@@ -991,8 +1022,45 @@ function createRouter(app, config, framework) {
         }
         const currentPage = Current.page;
         const pathname = handler.pathname;
+        const methodName = (_g = stacks.method) !== null && _g !== void 0 ? _g : '';
+        const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
-        if (action === 'POP') {
+        stacks.method = '';
+        if (methodName === 'reLaunch') {
+            handler.unload(currentPage, stacks.length);
+            // NOTE: 同时卸载缓存在tabs里面的页面实例
+            for (const key in cacheTabs) {
+                if (cacheTabs[key]) {
+                    handler.unload(cacheTabs[key]);
+                    stacks.removeTab(key);
+                }
+            }
+            shouldLoad = true;
+        }
+        else if (handler.isTabBar(handler.pathname)) {
+            if (handler.isSamePage(currentPage))
+                return;
+            if (handler.isTabBar(currentPage.path)) {
+                handler.hide(currentPage);
+                stacks.pushTab(currentPage.path.split('?')[0]);
+            }
+            else if (stacks.length > 0) {
+                const firstIns = stacks.getItem(0);
+                if (handler.isTabBar(firstIns.path)) {
+                    handler.unload(currentPage, stacks.length - 1);
+                    stacks.pushTab(firstIns.path.split('?')[0]);
+                }
+                else {
+                    handler.unload(currentPage, stacks.length);
+                }
+            }
+            if (cacheTabs[handler.pathname]) {
+                stacks.popTab(handler.pathname);
+                return handler.show(stacks.getItem(0), pageConfig, 0);
+            }
+            shouldLoad = true;
+        }
+        else if (action === 'POP') {
             // NOTE: 浏览器事件退后多次时，该事件只会被触发一次
             const prevIndex = stacks.getPrevIndex(pathname);
             const delta = stacks.getDelta(pathname);
@@ -1007,37 +1075,34 @@ function createRouter(app, config, framework) {
                 }
             }
         }
-        else {
-            if (handler.isTabBar) {
-                if (handler.isSamePage(currentPage))
-                    return;
-                const prevIndex = stacks.getPrevIndex(pathname, 0);
-                handler.hide(currentPage);
-                if (prevIndex > -1) {
-                    // NOTE: tabbar 页且之前出现过，直接复用
-                    return handler.show(stacks.getItem(prevIndex), pageConfig, prevIndex);
-                }
-            }
-            else if (action === 'REPLACE') {
-                const delta = stacks.getDelta(pathname);
-                // NOTE: 页面路由记录并不会清空，只是移除掉缓存的 stack 以及页面
-                handler.unload(currentPage, delta);
-            }
-            else if (action === 'PUSH') {
-                handler.hide(currentPage);
-            }
+        else if (action === 'REPLACE') {
+            const delta = stacks.getDelta(pathname);
+            // NOTE: 页面路由记录并不会清空，只是移除掉缓存的 stack 以及页面
+            handler.unload(currentPage, delta);
+            shouldLoad = true;
+        }
+        else if (action === 'PUSH') {
+            handler.hide(currentPage);
             shouldLoad = true;
         }
         if (shouldLoad || stacks.length < 1) {
-            const el = (_g = element.default) !== null && _g !== void 0 ? _g : element;
+            const el = (_h = element.default) !== null && _h !== void 0 ? _h : element;
             const loadConfig = Object.assign({}, pageConfig);
             const stacksIndex = stacks.length;
             delete loadConfig['path'];
             delete loadConfig['load'];
-            const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, location.pathname, framework, handler.PullDownRefresh) : el, pathname + stringify(handler.getQuery(stacksIndex)), {}, loadConfig);
+            let pageStampId = '';
+            if (launchStampId) {
+                pageStampId = launchStampId;
+                launchStampId = '';
+            }
+            else {
+                pageStampId = createStampId();
+            }
+            const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, location.pathname, framework, handler.PullDownRefresh) : el, pathname + stringify(handler.getQuery(pageStampId)), {}, loadConfig);
             if (params)
                 page.options = params;
-            return handler.load(page, pageConfig, stacksIndex);
+            return handler.load(page, pageConfig, pageStampId, stacksIndex);
         }
     });
     const routePath = addLeadingSlash(stripBasename(history.location.pathname, handler.basename));