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 項目，并且提供了健壯的錯誤處理機制，確保導航操作能夠順利完成。