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

解决方案说明

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

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

使用方法

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

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

注意事项

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

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