微信小程序中路由跳轉的方式有哪些？區別？

一、是什麼

微信小程序擁有web網頁和Application共同的特徵，我們的頁面都不是孤立存在的，而是通過和其他頁面進行交互，來共同完成系統的功能

在微信小程序中，每個頁面可以看成是一個pageModel，pageModel全部以棧的形式進行管理

二、有哪些

常見的微信小程序頁面跳轉方式有如下：

• wx.navigateTo(Object)

• wx.redirectTo(Object)

• wx.switchTab(Object)

• wx.navigateBack(Object)

• wx.reLaunch(Object)

wx.navigateTo(Object)

wx.navigateTo()用於保留當前頁面、跳轉到應用內的某個頁面，使用 wx.navigateBack可以返回到原頁面

對於頁面不是特別多的小程序，通常推薦使用 wx.navigateTo進行跳轉， 以便返回原頁面，以提高加載速度。當頁面特別多時，則不推薦使用

參數表如下所示：

流程圖如下：

wx.redirectTo(Object)

重定向，當頁面過多時，被保留頁面會擠佔微信分配給小程序的內存，或是達到微信所限制的 10 層頁面棧的情況下，我們應該考慮選擇 wx.redirectTo

wx.redirectTo()用於關閉當前頁面，跳轉到應用內的某個頁面

這樣的跳轉，可以避免跳轉前頁面佔據運行內存，但返回時頁面需要重新加載，增加了返回頁面的顯示時間

參數表如下所示：

流程圖如下所示：

wx.switchTab(Object)

跳轉到 tabBar頁面，並關閉其他所有非 tabBar 頁面

參數表如下所示：

wx.navigateBack(Object)

wx.navigateBack() 用於關閉當前頁面，並返回上一頁面或多級頁面，開發者可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層則設置對象的delta屬性即可

參數表如下：

wx.reLaunch(Object)

關閉所有頁面，打開到應用內的某個頁面，返回的時候跳到首頁

流程圖如下所示：

參數表如下所示：

三、總結

關於上述五種跳轉方式，做下總結：

• navigateTo 保留當前頁面，跳轉到應用內的某個頁面，使用 wx.navigateBack 可以返回到原頁

• redirectTo 關閉當前頁面，跳轉到應用內的某個頁面

• switchTab 跳轉到 tabBar 頁面，同時關閉其他非 tabBar 頁面

• navigateBack 返回上一頁面

• reLanch 關閉所有頁面，打開到應用內的某個頁面

其中關於它們的頁面棧的關係如下：

• avigateTo 新頁面入棧

• redirectTo 當前頁面出棧，新頁面入棧

• navigateBack 頁面不斷出棧，直到目標返回頁，新頁面入棧

• switchTab 頁面全部出棧，只留下新的 Tab 頁面

• reLanch 頁面全部出棧，只留下新的頁面

參考文獻

• https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/nI_-qKP65VJhZEDc2T6y7w