@tarojs/router 3.6.29 → 3.6.31-alpha.0

package/dist/api.js

@@ -16,13 +16,14 @@ function processNavigateUrl(option) {
         const parts = routesAlias.getOrigin(history.location.pathname).split('/');
         parts.pop();
         pathPieces.pathname.split('/').forEach((item) => {
-            if (item === '.') {
+            if (item === '.')
                 return;
-            }
             item === '..' ? parts.pop() : parts.push(item);
         });
         pathPieces.pathname = parts.join('/');
     }
+    // 确保是 / 开头的路径
+    pathPieces.pathname = addLeadingSlash(pathPieces.pathname);
     // 处理自定义路由
     pathPieces.pathname = routesAlias.getAlias(addLeadingSlash(pathPieces.pathname));
     // 处理 basename
@@ -50,20 +51,10 @@ function navigate(option, method) {
             });
             try {
                 if ('url' in option) {
-                    if (!RouterConfig.isPage(addLeadingSlash(option.url))) {
-                        const res = { errMsg: `${method}:fail page ${option.url} is not found` };
-                        fail === null || fail === void 0 ? void 0 : fail(res);
-                        complete === null || complete === void 0 ? void 0 : complete(res);
-                        if (fail || complete) {
-                            return resolve(res);
-                        }
-                        else {
-                            return reject(res);
-                        }
-                    }
                     const pathPieces = processNavigateUrl(option);
                     const state = { timestamp: Date.now() };
                     if (method === 'navigateTo') {
+                        // Note: 由于 spa 会针对弱网情况下，短时间内多次跳转同一个页面跳转加了锁，后续如果有用户反馈返回无效，那可能是这个问题
                         history.push(pathPieces, state);
                     }
                     else if (method === 'redirectTo' || method === 'switchTab') {

package/dist/index.cjs.js

@@ -15,7 +15,8 @@ var UniversalRouter = require('universal-router');
 function loadAnimateStyle(ms = 300) {
     const css = `
 body {
-  overflow: hidden; // 防止 iOS 页面滚动
+  /* 防止 iOS 页面滚动 */
+  overflow: hidden;
 }
 .taro_router > .taro_page {
   position: absolute;
@@ -44,7 +45,7 @@ body {
 /**
  * 插入路由相关样式
  */
-function loadRouterStyle(enableTabBar, enableWindowScroll) {
+function loadRouterStyle(enableTabBar, enableWindowScroll, enhanceAnimation) {
     const css = `
   .taro_router {
     position: relative;
@@ -72,11 +73,15 @@ ${enableTabBar ? `
   }
 
 ` : ''}
-  .taro_page_shade:has(+.taro_page_stationed),
+${enhanceAnimation
+        ? `.taro_page_shade:has(+.taro_page_stationed),
   .taro_page_shade.taro_tabbar_page,
   .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child):has(+.taro_page_stationed) {
     display: none;
-  }
+  }` : ` .taro_page_shade,
+  .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
+    display: none;
+  }`} 
 `;
     addStyle(css);
 }
@@ -142,7 +147,7 @@ function loadNavigationBarStyle() {
     to {
       transform: rotate(360deg);
     }
-  }  
+  }
 
   .taro-navigation-bar-no-icon > .taro-navigation-bar-home {
     display: none;
@@ -535,13 +540,14 @@ function processNavigateUrl(option) {
         const parts = routesAlias.getOrigin(exports.history.location.pathname).split('/');
         parts.pop();
         pathPieces.pathname.split('/').forEach((item) => {
-            if (item === '.') {
+            if (item === '.')
                 return;
-            }
             item === '..' ? parts.pop() : parts.push(item);
         });
         pathPieces.pathname = parts.join('/');
     }
+    // 确保是 / 开头的路径
+    pathPieces.pathname = runtime.addLeadingSlash(pathPieces.pathname);
     // 处理自定义路由
     pathPieces.pathname = routesAlias.getAlias(runtime.addLeadingSlash(pathPieces.pathname));
     // 处理 basename
@@ -569,20 +575,10 @@ function navigate(option, method) {
             });
             try {
                 if ('url' in option) {
-                    if (!RouterConfig.isPage(runtime.addLeadingSlash(option.url))) {
-                        const res = { errMsg: `${method}:fail page ${option.url} is not found` };
-                        fail === null || fail === void 0 ? void 0 : fail(res);
-                        complete === null || complete === void 0 ? void 0 : complete(res);
-                        if (fail || complete) {
-                            return resolve(res);
-                        }
-                        else {
-                            return reject(res);
-                        }
-                    }
                     const pathPieces = processNavigateUrl(option);
                     const state = { timestamp: Date.now() };
                     if (method === 'navigateTo') {
+                        // Note: 由于 spa 会针对弱网情况下，短时间内多次跳转同一个页面跳转加了锁，后续如果有用户反馈返回无效，那可能是这个问题
                         exports.history.push(pathPieces, state);
                     }
                     else if (method === 'redirectTo' || method === 'switchTab') {
@@ -975,7 +971,7 @@ class NavigationBarHandler {
         this.setNavigationLoading();
     }
     setCacheValue() {
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         if (typeof this.cache[currentPage] !== 'object') {
             this.cache[currentPage] = {};
         }
@@ -1006,7 +1002,7 @@ class NavigationBarHandler {
         var _a;
         if (!this.navigationBarElement)
             return;
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         let isShow;
         if (typeof show === 'boolean') {
             isShow = show;
@@ -1031,7 +1027,7 @@ class NavigationBarHandler {
         var _a, _b, _c;
         if (!this.navigationBarElement)
             return;
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         let color;
         if (typeof backgroundColor === 'string') {
             color = backgroundColor;
@@ -1055,7 +1051,7 @@ class NavigationBarHandler {
         var _a, _b, _c;
         if (!this.navigationBarElement)
             return;
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         let color;
         if (typeof fontColor === 'string') {
             color = fontColor;
@@ -1077,7 +1073,7 @@ class NavigationBarHandler {
     }
     setTitle(title) {
         var _a, _b, _c;
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         let proceedTitle;
         if (typeof title === 'string') {
             proceedTitle = title;
@@ -1192,14 +1188,14 @@ class PageHandler {
     }
     set pathname(p) { this.router.pathname = p; }
     get pathname() { return this.router.pathname; }
+    // Note: 把 pathname 转换为原始路径，主要是处理 customRoutes 和 basename
+    get originPathname() { return routesAlias.getOrigin(runtime.addLeadingSlash(runtime.stripBasename(this.pathname, this.basename))); }
     get basename() { return this.router.basename || ''; }
     get pageConfig() {
-        const routePath = runtime.addLeadingSlash(runtime.stripBasename(this.pathname, this.basename));
         const homePage = runtime.addLeadingSlash(this.homePage);
         return this.routes.find(r => {
-            var _a;
             const pagePath = runtime.addLeadingSlash(r.path);
-            return [pagePath, homePage].includes(routePath) || ((_a = routesAlias.getConfig(pagePath)) === null || _a === void 0 ? void 0 : _a.includes(routePath));
+            return [pagePath, homePage].includes(this.originPathname);
         });
     }
     isTabBar(pathname) {
@@ -1266,7 +1262,7 @@ class PageHandler {
         this.pathname = exports.history.location.pathname;
         // Note: 注入页面样式
         this.animation && loadAnimateStyle(this.animationDuration);
-        loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll);
+        loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll, this.router.enhanceAnimation);
     }
     onReady(page, onLoad = true) {
         var _a;
@@ -1390,7 +1386,7 @@ class PageHandler {
         }
     }
     hide(page, animation = false) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!page)
             return;
         // NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
@@ -1415,6 +1411,7 @@ class PageHandler {
                     this.hideTimer = null;
                     (_g = (_f = (_e = this.lastHidePage) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.add) === null || _g === void 0 ? void 0 : _g.call(_f, 'taro_page_shade');
                 }
+                (_h = page.onHide) === null || _h === void 0 ? void 0 : _h.call(page);
                 pageEl.classList.add('taro_page_shade');
                 this.lastHidePage = pageEl;
             }
@@ -1488,6 +1485,10 @@ function createRouter(history$1, app, config, framework) {
     }
     RouterConfig.config = config;
     const handler = new PageHandler(config, history$1);
+    // Note: 弱网情况下，快速切换 tab，会造成同个页面实例被多次挂在到页面上，原因是资源请求是异步的，短时间内发起多个请求，
+    // 会在资源加载完成后，同时走到挂载的逻辑，造成 pageStampId 更新不及时，两个 page 的Id 相同，后面很多操作是通过 getElementById 来进行的
+    // 所以需要加一个锁来应对这个情况
+    const pageLock = {};
     routesAlias.set(handler.router.customRoutes);
     const basename = handler.router.basename;
     const routes = handler.routes.map(route => {
@@ -1511,24 +1512,30 @@ function createRouter(history$1, app, config, framework) {
     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 }) => tslib.__awaiter(this, void 0, void 0, function* () {
         var _c, _d, _e, _f, _g, _h, _j, _k;
-        handler.pathname = decodeURI(location.pathname);
+        // Note: 由于下面有异步加载操作 先不要在这里去设置 handler.pathname
+        const currentPathname = decodeURI(location.pathname);
         if ((_c = window.__taroAppConfig) === null || _c === void 0 ? void 0 : _c.usingWindowScroll)
             window.scrollTo(0, 0);
         runtime.eventCenter.trigger('__taroRouterChange', {
             toLocation: {
-                path: handler.pathname
+                path: currentPathname
             }
         });
-        let element, params;
+        let element, context, params;
+        const routerPath = handler.router.forcePath || currentPathname;
+        pageLock[routerPath] = typeof pageLock[routerPath] === 'number' ? pageLock[routerPath] + 1 : 1;
+        const currentLock = pageLock[routerPath];
+        let postLock;
         try {
-            const result = yield router.resolve(handler.router.forcePath || handler.pathname);
-            [element, , params] = yield Promise.all(result);
+            const result = yield router.resolve(routerPath);
+            [element, context, params] = yield Promise.all(result);
+            postLock = pageLock[routerPath];
         }
         catch (error) {
             if (error.status === 404) {
                 const notFoundEvent = {
                     isEntryPage: stacks.length === 0,
-                    path: handler.pathname,
+                    path: currentPathname,
                     query: handler.getQuery(createStampId()),
                 };
                 (_d = app.onPageNotFound) === null || _d === void 0 ? void 0 : _d.call(app, notFoundEvent);
@@ -1542,9 +1549,12 @@ function createRouter(history$1, app, config, framework) {
                 throw error;
             }
         }
-        if (!element)
+        if (!element || currentLock !== postLock)
             return;
-        const pageConfig = handler.pageConfig;
+        // Note: 异步结束后，在设置 handler.pathname
+        // context.pathname 在 universal-router 被处理过了，是发起资源请求的时候传入的 pathname，即 await router.resolve(routerPath) 这个 routerPath
+        handler.pathname = context.pathname;
+        const { pathname, pageConfig } = handler;
         let enablePullDownRefresh = ((_e = config === null || config === void 0 ? void 0 : config.window) === null || _e === void 0 ? void 0 : _e.enablePullDownRefresh) || false;
         let navigationStyle = ((_f = config === null || config === void 0 ? void 0 : config.window) === null || _f === void 0 ? void 0 : _f.navigationStyle) || 'default';
         let navigationBarTextStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationBarTextStyle) || 'white';
@@ -1565,7 +1575,6 @@ function createRouter(history$1, app, config, framework) {
         }
         runtime.eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
         const currentPage = runtime.Current.page;
-        const pathname = handler.pathname;
         const methodName = (_j = stacks.method) !== null && _j !== void 0 ? _j : '';
         const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
@@ -1581,7 +1590,7 @@ function createRouter(history$1, app, config, framework) {
             }
             shouldLoad = true;
         }
-        else if (currentPage && handler.isTabBar(handler.pathname)) {
+        else if (currentPage && handler.isTabBar(pathname)) {
             if (handler.isSamePage(currentPage))
                 return;
             if (handler.isTabBar(currentPage.path)) {
@@ -1599,8 +1608,8 @@ function createRouter(history$1, app, config, framework) {
                     handler.unload(currentPage, stacks.length, true);
                 }
             }
-            if (cacheTabs[handler.pathname]) {
-                stacks.popTab(handler.pathname);
+            if (cacheTabs[pathname]) {
+                stacks.popTab(pathname);
                 return handler.show(stacks.getItem(0), pageConfig, 0);
             }
             shouldLoad = true;

package/dist/index.esm.js

@@ -14,7 +14,8 @@ import UniversalRouter from 'universal-router';
 function loadAnimateStyle(ms = 300) {
     const css = `
 body {
-  overflow: hidden; // 防止 iOS 页面滚动
+  /* 防止 iOS 页面滚动 */
+  overflow: hidden;
 }
 .taro_router > .taro_page {
   position: absolute;
@@ -43,7 +44,7 @@ body {
 /**
  * 插入路由相关样式
  */
-function loadRouterStyle(enableTabBar, enableWindowScroll) {
+function loadRouterStyle(enableTabBar, enableWindowScroll, enhanceAnimation) {
     const css = `
   .taro_router {
     position: relative;
@@ -71,11 +72,15 @@ ${enableTabBar ? `
   }
 
 ` : ''}
-  .taro_page_shade:has(+.taro_page_stationed),
+${enhanceAnimation
+        ? `.taro_page_shade:has(+.taro_page_stationed),
   .taro_page_shade.taro_tabbar_page,
   .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child):has(+.taro_page_stationed) {
     display: none;
-  }
+  }` : ` .taro_page_shade,
+  .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
+    display: none;
+  }`} 
 `;
     addStyle(css);
 }
@@ -141,7 +146,7 @@ function loadNavigationBarStyle() {
     to {
       transform: rotate(360deg);
     }
-  }  
+  }
 
   .taro-navigation-bar-no-icon > .taro-navigation-bar-home {
     display: none;
@@ -534,13 +539,14 @@ function processNavigateUrl(option) {
         const parts = routesAlias.getOrigin(history.location.pathname).split('/');
         parts.pop();
         pathPieces.pathname.split('/').forEach((item) => {
-            if (item === '.') {
+            if (item === '.')
                 return;
-            }
             item === '..' ? parts.pop() : parts.push(item);
         });
         pathPieces.pathname = parts.join('/');
     }
+    // 确保是 / 开头的路径
+    pathPieces.pathname = addLeadingSlash(pathPieces.pathname);
     // 处理自定义路由
     pathPieces.pathname = routesAlias.getAlias(addLeadingSlash(pathPieces.pathname));
     // 处理 basename
@@ -568,20 +574,10 @@ function navigate(option, method) {
             });
             try {
                 if ('url' in option) {
-                    if (!RouterConfig.isPage(addLeadingSlash(option.url))) {
-                        const res = { errMsg: `${method}:fail page ${option.url} is not found` };
-                        fail === null || fail === void 0 ? void 0 : fail(res);
-                        complete === null || complete === void 0 ? void 0 : complete(res);
-                        if (fail || complete) {
-                            return resolve(res);
-                        }
-                        else {
-                            return reject(res);
-                        }
-                    }
                     const pathPieces = processNavigateUrl(option);
                     const state = { timestamp: Date.now() };
                     if (method === 'navigateTo') {
+                        // Note: 由于 spa 会针对弱网情况下，短时间内多次跳转同一个页面跳转加了锁，后续如果有用户反馈返回无效，那可能是这个问题
                         history.push(pathPieces, state);
                     }
                     else if (method === 'redirectTo' || method === 'switchTab') {
@@ -974,7 +970,7 @@ class NavigationBarHandler {
         this.setNavigationLoading();
     }
     setCacheValue() {
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         if (typeof this.cache[currentPage] !== 'object') {
             this.cache[currentPage] = {};
         }
@@ -1005,7 +1001,7 @@ class NavigationBarHandler {
         var _a;
         if (!this.navigationBarElement)
             return;
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         let isShow;
         if (typeof show === 'boolean') {
             isShow = show;
@@ -1030,7 +1026,7 @@ class NavigationBarHandler {
         var _a, _b, _c;
         if (!this.navigationBarElement)
             return;
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         let color;
         if (typeof backgroundColor === 'string') {
             color = backgroundColor;
@@ -1054,7 +1050,7 @@ class NavigationBarHandler {
         var _a, _b, _c;
         if (!this.navigationBarElement)
             return;
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         let color;
         if (typeof fontColor === 'string') {
             color = fontColor;
@@ -1076,7 +1072,7 @@ class NavigationBarHandler {
     }
     setTitle(title) {
         var _a, _b, _c;
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         let proceedTitle;
         if (typeof title === 'string') {
             proceedTitle = title;
@@ -1191,14 +1187,14 @@ class PageHandler {
     }
     set pathname(p) { this.router.pathname = p; }
     get pathname() { return this.router.pathname; }
+    // Note: 把 pathname 转换为原始路径，主要是处理 customRoutes 和 basename
+    get originPathname() { return routesAlias.getOrigin(addLeadingSlash(stripBasename(this.pathname, this.basename))); }
     get basename() { return this.router.basename || ''; }
     get pageConfig() {
-        const routePath = addLeadingSlash(stripBasename(this.pathname, this.basename));
         const homePage = addLeadingSlash(this.homePage);
         return this.routes.find(r => {
-            var _a;
             const pagePath = addLeadingSlash(r.path);
-            return [pagePath, homePage].includes(routePath) || ((_a = routesAlias.getConfig(pagePath)) === null || _a === void 0 ? void 0 : _a.includes(routePath));
+            return [pagePath, homePage].includes(this.originPathname);
         });
     }
     isTabBar(pathname) {
@@ -1265,7 +1261,7 @@ class PageHandler {
         this.pathname = history.location.pathname;
         // Note: 注入页面样式
         this.animation && loadAnimateStyle(this.animationDuration);
-        loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll);
+        loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll, this.router.enhanceAnimation);
     }
     onReady(page, onLoad = true) {
         var _a;
@@ -1389,7 +1385,7 @@ class PageHandler {
         }
     }
     hide(page, animation = false) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!page)
             return;
         // NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
@@ -1414,6 +1410,7 @@ class PageHandler {
                     this.hideTimer = null;
                     (_g = (_f = (_e = this.lastHidePage) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.add) === null || _g === void 0 ? void 0 : _g.call(_f, 'taro_page_shade');
                 }
+                (_h = page.onHide) === null || _h === void 0 ? void 0 : _h.call(page);
                 pageEl.classList.add('taro_page_shade');
                 this.lastHidePage = pageEl;
             }
@@ -1487,6 +1484,10 @@ function createRouter(history, app, config, framework) {
     }
     RouterConfig.config = config;
     const handler = new PageHandler(config, history);
+    // Note: 弱网情况下，快速切换 tab，会造成同个页面实例被多次挂在到页面上，原因是资源请求是异步的，短时间内发起多个请求，
+    // 会在资源加载完成后，同时走到挂载的逻辑，造成 pageStampId 更新不及时，两个 page 的Id 相同，后面很多操作是通过 getElementById 来进行的
+    // 所以需要加一个锁来应对这个情况
+    const pageLock = {};
     routesAlias.set(handler.router.customRoutes);
     const basename = handler.router.basename;
     const routes = handler.routes.map(route => {
@@ -1510,24 +1511,30 @@ function createRouter(history, app, config, framework) {
     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, _h, _j, _k;
-        handler.pathname = decodeURI(location.pathname);
+        // Note: 由于下面有异步加载操作 先不要在这里去设置 handler.pathname
+        const currentPathname = decodeURI(location.pathname);
         if ((_c = window.__taroAppConfig) === null || _c === void 0 ? void 0 : _c.usingWindowScroll)
             window.scrollTo(0, 0);
         eventCenter.trigger('__taroRouterChange', {
             toLocation: {
-                path: handler.pathname
+                path: currentPathname
             }
         });
-        let element, params;
+        let element, context, params;
+        const routerPath = handler.router.forcePath || currentPathname;
+        pageLock[routerPath] = typeof pageLock[routerPath] === 'number' ? pageLock[routerPath] + 1 : 1;
+        const currentLock = pageLock[routerPath];
+        let postLock;
         try {
-            const result = yield router.resolve(handler.router.forcePath || handler.pathname);
-            [element, , params] = yield Promise.all(result);
+            const result = yield router.resolve(routerPath);
+            [element, context, params] = yield Promise.all(result);
+            postLock = pageLock[routerPath];
         }
         catch (error) {
             if (error.status === 404) {
                 const notFoundEvent = {
                     isEntryPage: stacks.length === 0,
-                    path: handler.pathname,
+                    path: currentPathname,
                     query: handler.getQuery(createStampId()),
                 };
                 (_d = app.onPageNotFound) === null || _d === void 0 ? void 0 : _d.call(app, notFoundEvent);
@@ -1541,9 +1548,12 @@ function createRouter(history, app, config, framework) {
                 throw error;
             }
         }
-        if (!element)
+        if (!element || currentLock !== postLock)
             return;
-        const pageConfig = handler.pageConfig;
+        // Note: 异步结束后，在设置 handler.pathname
+        // context.pathname 在 universal-router 被处理过了，是发起资源请求的时候传入的 pathname，即 await router.resolve(routerPath) 这个 routerPath
+        handler.pathname = context.pathname;
+        const { pathname, pageConfig } = handler;
         let enablePullDownRefresh = ((_e = config === null || config === void 0 ? void 0 : config.window) === null || _e === void 0 ? void 0 : _e.enablePullDownRefresh) || false;
         let navigationStyle = ((_f = config === null || config === void 0 ? void 0 : config.window) === null || _f === void 0 ? void 0 : _f.navigationStyle) || 'default';
         let navigationBarTextStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationBarTextStyle) || 'white';
@@ -1564,7 +1574,6 @@ function createRouter(history, app, config, framework) {
         }
         eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
         const currentPage = Current.page;
-        const pathname = handler.pathname;
         const methodName = (_j = stacks.method) !== null && _j !== void 0 ? _j : '';
         const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
@@ -1580,7 +1589,7 @@ function createRouter(history, app, config, framework) {
             }
             shouldLoad = true;
         }
-        else if (currentPage && handler.isTabBar(handler.pathname)) {
+        else if (currentPage && handler.isTabBar(pathname)) {
             if (handler.isSamePage(currentPage))
                 return;
             if (handler.isTabBar(currentPage.path)) {
@@ -1598,8 +1607,8 @@ function createRouter(history, app, config, framework) {
                     handler.unload(currentPage, stacks.length, true);
                 }
             }
-            if (cacheTabs[handler.pathname]) {
-                stacks.popTab(handler.pathname);
+            if (cacheTabs[pathname]) {
+                stacks.popTab(pathname);
                 return handler.show(stacks.getItem(0), pageConfig, 0);
             }
             shouldLoad = true;

package/dist/router/navigation-bar.js

@@ -73,7 +73,7 @@ class NavigationBarHandler {
         this.setNavigationLoading();
     }
     setCacheValue() {
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         if (typeof this.cache[currentPage] !== 'object') {
             this.cache[currentPage] = {};
         }
@@ -104,7 +104,7 @@ class NavigationBarHandler {
         var _a;
         if (!this.navigationBarElement)
             return;
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         let isShow;
         if (typeof show === 'boolean') {
             isShow = show;
@@ -129,7 +129,7 @@ class NavigationBarHandler {
         var _a, _b, _c;
         if (!this.navigationBarElement)
             return;
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         let color;
         if (typeof backgroundColor === 'string') {
             color = backgroundColor;
@@ -153,7 +153,7 @@ class NavigationBarHandler {
         var _a, _b, _c;
         if (!this.navigationBarElement)
             return;
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         let color;
         if (typeof fontColor === 'string') {
             color = fontColor;
@@ -175,7 +175,7 @@ class NavigationBarHandler {
     }
     setTitle(title) {
         var _a, _b, _c;
-        const currentPage = this.pageContext.currentPage;
+        const currentPage = this.pageContext.originPathname;
         let proceedTitle;
         if (typeof title === 'string') {
             proceedTitle = title;

package/dist/router/page.d.ts

@@ -28,6 +28,7 @@ declare class PageHandler {
     get animationDuration(): number;
     set pathname(p: string);
     get pathname(): string;
+    get originPathname(): string;
     get basename(): string;
     get pageConfig(): Route | undefined;
     isTabBar(pathname: string): boolean;

package/dist/router/page.js

@@ -49,14 +49,14 @@ class PageHandler {
     }
     set pathname(p) { this.router.pathname = p; }
     get pathname() { return this.router.pathname; }
+    // Note: 把 pathname 转换为原始路径，主要是处理 customRoutes 和 basename
+    get originPathname() { return routesAlias.getOrigin(addLeadingSlash(stripBasename(this.pathname, this.basename))); }
     get basename() { return this.router.basename || ''; }
     get pageConfig() {
-        const routePath = addLeadingSlash(stripBasename(this.pathname, this.basename));
         const homePage = addLeadingSlash(this.homePage);
         return this.routes.find(r => {
-            var _a;
             const pagePath = addLeadingSlash(r.path);
-            return [pagePath, homePage].includes(routePath) || ((_a = routesAlias.getConfig(pagePath)) === null || _a === void 0 ? void 0 : _a.includes(routePath));
+            return [pagePath, homePage].includes(this.originPathname);
         });
     }
     isTabBar(pathname) {
@@ -123,7 +123,7 @@ class PageHandler {
         this.pathname = history.location.pathname;
         // Note: 注入页面样式
         this.animation && loadAnimateStyle(this.animationDuration);
-        loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll);
+        loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll, this.router.enhanceAnimation);
     }
     onReady(page, onLoad = true) {
         var _a;
@@ -247,7 +247,7 @@ class PageHandler {
         }
     }
     hide(page, animation = false) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!page)
             return;
         // NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
@@ -272,6 +272,7 @@ class PageHandler {
                     this.hideTimer = null;
                     (_g = (_f = (_e = this.lastHidePage) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.add) === null || _g === void 0 ? void 0 : _g.call(_f, 'taro_page_shade');
                 }
+                (_h = page.onHide) === null || _h === void 0 ? void 0 : _h.call(page);
                 pageEl.classList.add('taro_page_shade');
                 this.lastHidePage = pageEl;
             }

package/dist/router/spa.js

@@ -17,6 +17,10 @@ function createRouter(history, app, config, framework) {
     }
     RouterConfig.config = config;
     const handler = new PageHandler(config, history);
+    // Note: 弱网情况下，快速切换 tab，会造成同个页面实例被多次挂在到页面上，原因是资源请求是异步的，短时间内发起多个请求，
+    // 会在资源加载完成后，同时走到挂载的逻辑，造成 pageStampId 更新不及时，两个 page 的Id 相同，后面很多操作是通过 getElementById 来进行的
+    // 所以需要加一个锁来应对这个情况
+    const pageLock = {};
     routesAlias.set(handler.router.customRoutes);
     const basename = handler.router.basename;
     const routes = handler.routes.map(route => {
@@ -40,24 +44,30 @@ function createRouter(history, app, config, framework) {
     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, _h, _j, _k;
-        handler.pathname = decodeURI(location.pathname);
+        // Note: 由于下面有异步加载操作 先不要在这里去设置 handler.pathname
+        const currentPathname = decodeURI(location.pathname);
         if ((_c = window.__taroAppConfig) === null || _c === void 0 ? void 0 : _c.usingWindowScroll)
             window.scrollTo(0, 0);
         eventCenter.trigger('__taroRouterChange', {
             toLocation: {
-                path: handler.pathname
+                path: currentPathname
             }
         });
-        let element, params;
+        let element, context, params;
+        const routerPath = handler.router.forcePath || currentPathname;
+        pageLock[routerPath] = typeof pageLock[routerPath] === 'number' ? pageLock[routerPath] + 1 : 1;
+        const currentLock = pageLock[routerPath];
+        let postLock;
         try {
-            const result = yield router.resolve(handler.router.forcePath || handler.pathname);
-            [element, , params] = yield Promise.all(result);
+            const result = yield router.resolve(routerPath);
+            [element, context, params] = yield Promise.all(result);
+            postLock = pageLock[routerPath];
         }
         catch (error) {
             if (error.status === 404) {
                 const notFoundEvent = {
                     isEntryPage: stacks.length === 0,
-                    path: handler.pathname,
+                    path: currentPathname,
                     query: handler.getQuery(createStampId()),
                 };
                 (_d = app.onPageNotFound) === null || _d === void 0 ? void 0 : _d.call(app, notFoundEvent);
@@ -71,9 +81,12 @@ function createRouter(history, app, config, framework) {
                 throw error;
             }
         }
-        if (!element)
+        if (!element || currentLock !== postLock)
             return;
-        const pageConfig = handler.pageConfig;
+        // Note: 异步结束后，在设置 handler.pathname
+        // context.pathname 在 universal-router 被处理过了，是发起资源请求的时候传入的 pathname，即 await router.resolve(routerPath) 这个 routerPath
+        handler.pathname = context.pathname;
+        const { pathname, pageConfig } = handler;
         let enablePullDownRefresh = ((_e = config === null || config === void 0 ? void 0 : config.window) === null || _e === void 0 ? void 0 : _e.enablePullDownRefresh) || false;
         let navigationStyle = ((_f = config === null || config === void 0 ? void 0 : config.window) === null || _f === void 0 ? void 0 : _f.navigationStyle) || 'default';
         let navigationBarTextStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationBarTextStyle) || 'white';
@@ -94,7 +107,6 @@ function createRouter(history, app, config, framework) {
         }
         eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
         const currentPage = Current.page;
-        const pathname = handler.pathname;
         const methodName = (_j = stacks.method) !== null && _j !== void 0 ? _j : '';
         const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
@@ -110,7 +122,7 @@ function createRouter(history, app, config, framework) {
             }
             shouldLoad = true;
         }
-        else if (currentPage && handler.isTabBar(handler.pathname)) {
+        else if (currentPage && handler.isTabBar(pathname)) {
             if (handler.isSamePage(currentPage))
                 return;
             if (handler.isTabBar(currentPage.path)) {
@@ -128,8 +140,8 @@ function createRouter(history, app, config, framework) {
                     handler.unload(currentPage, stacks.length, true);
                 }
             }
-            if (cacheTabs[handler.pathname]) {
-                stacks.popTab(handler.pathname);
+            if (cacheTabs[pathname]) {
+                stacks.popTab(pathname);
                 return handler.show(stacks.getItem(0), pageConfig, 0);
             }
             shouldLoad = true;

package/dist/style.d.ts

@@ -5,7 +5,7 @@ declare function loadAnimateStyle(ms?: number): void;
 /**
  * 插入路由相关样式
  */
-declare function loadRouterStyle(enableTabBar: boolean, enableWindowScroll: boolean): void;
+declare function loadRouterStyle(enableTabBar: boolean, enableWindowScroll: boolean, enhanceAnimation?: boolean): void;
 /**
  * 插入导航栏相关的样式
 */

package/dist/style.js

@@ -4,7 +4,8 @@
 function loadAnimateStyle(ms = 300) {
     const css = `
 body {
-  overflow: hidden; // 防止 iOS 页面滚动
+  /* 防止 iOS 页面滚动 */
+  overflow: hidden;
 }
 .taro_router > .taro_page {
   position: absolute;
@@ -33,7 +34,7 @@ body {
 /**
  * 插入路由相关样式
  */
-function loadRouterStyle(enableTabBar, enableWindowScroll) {
+function loadRouterStyle(enableTabBar, enableWindowScroll, enhanceAnimation) {
     const css = `
   .taro_router {
     position: relative;
@@ -61,11 +62,15 @@ ${enableTabBar ? `
   }
 
 ` : ''}
-  .taro_page_shade:has(+.taro_page_stationed),
+${enhanceAnimation
+        ? `.taro_page_shade:has(+.taro_page_stationed),
   .taro_page_shade.taro_tabbar_page,
   .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child):has(+.taro_page_stationed) {
     display: none;
-  }
+  }` : ` .taro_page_shade,
+  .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
+    display: none;
+  }`} 
 `;
     addStyle(css);
 }
@@ -131,7 +136,7 @@ function loadNavigationBarStyle() {
     to {
       transform: rotate(360deg);
     }
-  }  
+  }
 
   .taro-navigation-bar-no-icon > .taro-navigation-bar-home {
     display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/router",
-  "version": "3.6.29",
+  "version": "3.6.31-alpha.0",
   "description": "Taro-router",
   "browser": "dist/index.js",
   "main:h5": "dist/index.esm.js",
@@ -44,14 +44,14 @@
     "rollup-plugin-ts": "^3.0.2",
     "ts-jest": "^29.0.5",
     "typescript": "^4.7.4",
-    "@tarojs/runtime": "3.6.29",
-    "@tarojs/taro": "3.6.29",
-    "@tarojs/shared": "3.6.29"
+    "@tarojs/runtime": "3.6.31-alpha.0",
+    "@tarojs/shared": "3.6.31-alpha.0",
+    "@tarojs/taro": "3.6.31-alpha.0"
   },
   "peerDependencies": {
-    "@tarojs/runtime": "3.6.29",
-    "@tarojs/taro": "3.6.29",
-    "@tarojs/shared": "3.6.29"
+    "@tarojs/runtime": "3.6.31-alpha.0",
+    "@tarojs/taro": "3.6.31-alpha.0",
+    "@tarojs/shared": "3.6.31-alpha.0"
   },
   "scripts": {
     "prebuild": "pnpm run clean",

package/types/router.d.ts

@@ -12,6 +12,8 @@ export interface Router {
   customRoutes?: Record<string, string | string[]>
   pathname: string
   forcePath?: string
+  /** 加上这个参数，可以解决返回页面的时候白屏的问题，但是某些不支持 :has() 选择器的浏览器会有问题 */
+  enhanceAnimation?: boolean
 }
 
 export interface SpaRouterConfig extends AppConfig {