uniapp 页面栈一定深度后，回首页导航到新页面的解决方案

uniapp 页面栈一定深度后，回首页导航到新页面的解决方案

uniapp 页面导航解决方案

在 uniapp 中，要实现先弹出页面栈回到首页，然后再跳转到指定页面。

/** * @description 后台选择链接专用跳转 / interface Link { path: string; name?: string; type: string; isTab: boolean; query?: Record<string, any>; } export enum LinkTypeEnum { "SHOP_PAGES" = "shop", "CUSTOM_LINK" = "custom", } export function navigateTo( link: Link, navigateType: "navigateTo" | "reLaunch" | "switchTab" = "navigateTo" ) { const url = link.query ? ${link.path}?${objectToQuery(link.query)} : link.path; navigateType == "navigateTo" && uni.navigateTo({ url }); navigateType == "reLaunch" && uni.reLaunch({ url }); } /* * @description 重新定向页面路由 * @param {string} baseUrl 首页基准路由URL * @param {string} navigateToUrl 基准路由->跳转的页面URL（可以为空，这样就是定向到首页） * @param {Function} uToastRefShow 弹窗提示 * @param {string} uToastMsg 弹窗提示信息 * / export const goRedirectRouteMethod = async ( baseUrl: string, navigateToUrl: string, uToastRefShowFun: Function, uToastMsg: string = "跳转成功" ) => { console.log("goRedirectRouteMethod:baseUrl=", baseUrl,); console.log("goRedirectRouteMethod:navigateToUrl=", navigateToUrl); /* * @description 默认 navigateBack / if (baseUrl == undefined || baseUrl == null || baseUrl == '') { uni.navigateBack({}); } let pages = getCurrentPages(); if (pages.length == 0) { return; } console.log("getCurrentPages", pages); if (baseUrl.startsWith("/")) { baseUrl = baseUrl.substring(1, baseUrl.length); } console.log("====baseUrl====", baseUrl); let lngth: number = pages.length; // 返回的页面数 let deltatmp: number = 1; for (let index = 0; index < lngth; index++) { let route = pages[index].route; if (route == baseUrl) { deltatmp = lngth - index - 1; break; } } if (!(uToastRefShowFun == null || uToastRefShowFun == undefined)) { uToastRefShowFun(uToastMsg, "success", 2000); } await setTimeout(() => { // 4. 返回A页面 uni.navigateBack({ delta: deltatmp, success: () => { /* === / setTimeout(() => { if (navigateToUrl?.length > 0) { if (!navigateToUrl.startsWith("/")) { navigateToUrl = "/" + navigateToUrl; } // 5. 跳转到B页面 有BUG 首页会闪一下 navigateTo({ path: navigateToUrl, type: '', isTab: false, query: {} }) } }, 300) / === **/ }, }); }, 2000); } 

解决方案说明

上述代码提供了一个完整的导航工具类，主要功能包括：

获取页面栈长度：通过 getCurrentPages() API 获取当前页面栈的深度

智能导航逻辑：

先判断当前是否已经在首页

如果不在首页，根据首页在栈中的位置选择合适的方式返回首页

返回首页后，再跳转到目标页面

参数传递支持：支持向目标页面传递参数

错误处理：当导航失败时提供备选方案

使用方法

你可以在任何页面中引入这个导航工具，然后调用 backToHomeAndNavigate 方法，传入目标页面路径和可选的参数对象。

goRedirectRouteMethod( "/package/index/index", "/package/healthSign/index", uToastRefShow, // 弹窗提示信息函数 "转到【首页】-->【健康签约】页面" );

注意事项

请根据你的项目结构调整首页路径 baseUrl

页面路径需要使用绝对路径，以 / 开头

代码中使用了 setTimeout 来确保页面跳转的顺序性，你可以根据实际情况调整延迟时间或使用 Promise 链式调用

这个解决方案适用于大多数 uniapp 项目，并且提供了健壮的错误处理机制，确保导航操作能够顺利完成。