原文地址:頁面路由
說明
在小程序中所有頁面的路由全部由框架進行管理,當路由發生時,會通過頁面生命週期方法通知到頁面。
在框架管理路由時,一個重要概念爲頁面棧。
框架以棧的形式維護了當前的所有頁面。當發生路由切換的時候,頁面棧的表現如下:
路由方式 | 頁面棧表現 |
---|---|
初始化 | 新頁面入棧 |
打開新頁面 | 新頁面入棧 |
頁面重定向 | 當前頁面出棧,新頁面入棧 |
頁面返回 | 頁面不斷出棧,直到目標返回頁,新頁面入棧 |
Tab 切換 | 頁面全部出棧,只留下新的 Tab 頁面 |
重加載 | 頁面全部出棧,只留下新的頁面 |
通過getCurrentPages() 函數可以獲取當前頁面棧的實例,其以數組形式按棧的順序給出,第一個元素爲首頁,最後一個元素爲當前頁面(注意:不要嘗試修改頁面棧,會導致路由以及頁面狀態錯誤)。
路由的觸發方式以及頁面生命週期函數如下:
路由方式 | 觸發時機 | 路由前頁面 | 路由後頁面 |
---|---|---|---|
初始化 | 小程序打開的第一個頁面 | onLoad, onShow | |
打開新頁面 | 調用 API wx.navigateTo 或使用組件 | onHide | onLoad, onShow |
頁面重定向 | 調用 API wx.redirectTo 或使用組件 | onUnload | onLoad, onShow |
頁面返回 | 調用 API wx.navigateBack 或使用組件或用戶按左上角返回按鈕 | onUnload | onShow |
Tab 切換 | 調用 API wx.switchTab 或使用組件 或用戶切換 Tab | 各種情況請參考下表 | |
重啓動 | 調用 API wx.reLaunch 或使用組件 | onUnload | onLoad, onShow |
Tab 切換對應的生命週期(以 A、B 頁面爲 Tabbar 頁面,C 是從 A 頁面打開的頁面,D 頁面是從 C 頁面打開的頁面爲例):
當前頁面 | 路由後頁面 | 觸發的生命週期(按順序) |
---|---|---|
A | A | Nothing happend |
A | B | A.onHide(), B.onLoad(), B.onShow() |
A | B(再次打開) | A.onHide(), B.onShow() |
C | A | C.onUnload(), A.onShow() |
C | B | C.onUnload(), B.onLoad(), B.onShow() |
D | B | D.onUnload(), C.onUnload(), B.onLoad(), B.onShow() |
D(從轉發進入) | A | D.onUnload(), A.onLoad(), A.onShow() |
D(從轉發進入) | B | D.onUnload(), B.onLoad(), B.onShow() |
Tips:
- navigateTo, redirectTo 只能打開非 tabBar 頁面。
- switchTab 只能打開 tabBar 頁面。
- reLaunch 可以打開任意頁面。
- 頁面底部的 tabBar 由頁面決定,即只要是定義爲 tabBar 的頁面,底部都有 tabBar。
- 調用頁面路由帶的參數可以在目標頁面的onLoad中獲取。