---

前言

微信小程序頁面跳轉的各種方法總結，備查。

---

方式一：wx.navigateTo

保留當前頁面，跳轉到應用內的某個頁面。可以通過調用 wx.navigateBack 返回到原頁面。跳轉后左上角出現返回小箭頭，點擊后可返回原本頁面。示例代碼：

wx.navigateTo({url: '../carDetails/carDetails'
})

• 使用場景

適用于需要跳轉到新頁面并保留原頁面狀態的情況，比如從列表頁跳轉到詳情頁。

• 優點

可以保留原頁面的狀態，用戶返回時可以繼續操作。

• 缺點

每次跳轉都會創建新頁面，可能會占用較多的內存資源。

方式二：wx.redirectTo

關閉當前頁面，跳轉到應用內的某個頁面，不能跳轉 tabbar 頁面，跳轉后左上角出現返回首頁圖標，點擊后可返回首頁面。示例代碼：

wx.redirectTo({url: '../carDetails/carDetails'
})

• 使用場景

適用于需要關閉當前頁面并跳轉到新頁面的情況，比如登錄成功后跳轉到首頁。

• 優點

可以直接關閉當前頁面，減少內存占用。

• 缺點

無法保留原頁面的狀態，用戶返回時會重新加載頁面。

方式三：wx.reLaunch

關閉所有頁面，打開應用內的某個頁面，跳轉后左上角出現返回首頁圖標，點擊后可返回首頁面。示例代碼：

wx.reLaunch({url: '../carDetails/carDetails'
})

• 使用場景

適用于需要關閉所有頁面并打開新頁面的情況，比如用戶退出登錄后跳轉到登錄頁。

• 優點

可以清空頁面棧，減少內存占用。

• 缺點

無法保留原頁面的狀態，用戶返回時會重新加載頁面。

方式四：wx.switchTab

跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面，該方法只能跳轉 tabbar 頁面。 示例代碼：

wx.switchTab({url: '../install/install'
})

• 使用場景

適用于需要跳轉到 tabBar 頁面的情況，比如從其他頁面跳轉到首頁。

• 優點

可以直接跳轉到 tabBar 頁面，方便用戶導航。

• 缺點

無法保留原頁面的狀態，用戶返回時會重新加載頁面。

方式五：wxml中navigator標簽跳轉

通過設置 url 屬性來指定跳轉的目標頁面。 示例代碼：

<navigator url="../carDetails/carDetails"><button>我是A頁面，點擊跳轉到B頁面</button></navigator>

• 使用場景

適用于需要在頁面中添加跳轉鏈接的情況，比如在列表頁中點擊某個項跳轉到詳情頁。

• 優點

使用簡單，可以直接在頁面中添加跳轉鏈接。

• 缺點

無法保留原頁面的狀態，用戶返回時會重新加載頁面。

• 注意

<navigator> 組件只能跳轉到小程序內的頁面，無法跳轉到外部鏈接。如果需要跳轉到外部鏈接，可以使用 <a> 標簽，并設置 open-type 屬性為 navigate。

頁面回退

wx.navigateBack(Object object)

• 功能描述

關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages 獲取當前的頁面棧，決定需要返回幾層。

• wx.navigateBack的作用

wx.navigateBack函數是微信小程序提供的一個API接口，用于實現頁面的跳轉回退功能。具體來說，它可以用來回到歷史記錄中的上一個頁面。

例如，在一個小程序中，用戶從頁面A跳轉到頁面B，此時在頁面B中如果使用wx.navigateBack函數，則可以返回到頁面A，即上一個頁面。

• wx.navigateBack的參數

wx.navigateBack函數支持傳入一個參數，用來指定返回的頁面數，即返回歷史記錄中的第幾個頁面。

例如，如果用戶從頁面A跳轉到頁面B，再從頁面B跳轉到頁面C，此時在頁面C中使用wx.navigateBack(2)函數，則可以返回到頁面A，因為歷史記錄中的第2個頁面就是頁面A。

// 示例代碼
wx.navigateBack({delta: 2
})