网站运营建站优化专家宁波外贸网站设计公司

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);
}

解决方案说明

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

1. 获取页面栈长度：通过 getCurrentPages() API 获取当前页面栈的深度
2. 智能导航逻辑：
   • 先判断当前是否已经在首页
   • 如果不在首页，根据首页在栈中的位置选择合适的方式返回首页
   • 返回首页后，再跳转到目标页面
3. 参数传递支持：支持向目标页面传递参数
4. 错误处理：当导航失败时提供备选方案

使用方法

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

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

注意事项

1. 请根据你的项目结构调整首页路径 baseUrl
2. 页面路径需要使用绝对路径，以 / 开头
3. 代码中使用了 setTimeout 来确保页面跳转的顺序性，你可以根据实际情况调整延迟时间或使用 Promise 链式调用

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