一個小程序擁有多個頁面，我們可以通過wx.navigateTo推入一個新的頁面，如圖3-6所示，在首頁使用2次wx.navigateTo后，頁面層級會有三層，我們把這樣的一個頁面層級稱為頁面棧。
圖3-6 使用2次wx.navigateTo后的頁面棧
后續為了表述方便，我們采用這樣的方式進行描述頁面棧：[ pageA, pageB, pageC ]，其中pageA在最底下，pageC在最頂上，也就是用戶所看到的界面，需要注意在本書編寫的時候，小程序宿主環境限制了這個頁面棧的最大層級為10層 ，也就是當頁面棧到達10層之后就沒有辦法再推入新的頁面了。我們下面來通過上邊這個頁面棧描述以下幾個和導航相關的API。
使用 wx.navigateTo({ url: 'pageD' }) 可以往當前頁面棧多推入一個 pageD，此時頁面棧變成 [ pageA, pageB, pageC, pageD ]。
使用 wx.navigateBack() 可以退出當前頁面棧的最頂上頁面，此時頁面棧變成 [ pageA, pageB, pageC ]。
使用wx.redirectTo({ url: 'pageE' }) 是替換當前頁變成pageE，此時頁面棧變成 [ pageA, pageB, pageE ]，當頁面棧到達10層沒法再新增的時候，往往就是使用redirectTo這個API進行頁面跳轉。
小程序提供了原生的Tabbar支持，我們可以在app.json聲明tabBar字段來定義Tabbar頁（注：更多詳細參數見Tabbar官方文檔 ）。
代碼清單3-14 app.json定義小程序底部tab
{
"tabBar": {
"list": [
{ "text": "Tab1", "pagePath": "pageA" },
{ "text": "Tab1", "pagePath": "pageF" },
{ "text": "Tab1", "pagePath": "pageG" }
]
}
}
我們可以在剛剛的例子所在的頁面棧中使用wx.switchTab({ url: 'pageF' })，此時原來的頁面棧會被清空（除了已經聲明為Tabbar頁pageA外其他頁面會被銷毀），然后會切到pageF所在的tab頁面，頁面棧變成 [ pageF ]，此時點擊Tab1切回到pageA時，pageA不會再觸發onLoad，因為pageA沒有被銷毀。
補充一下，wx.navigateTo和wx.redirectTo只能打開非TabBar頁面，wx.switchTab只能打開Tabbar頁面。
我們還可以使用 wx. reLaunch({ url: 'pageH' }) 重啟小程序，並且打開pageH，此時頁面棧為 [ pageH ]。表3-5羅列了詳細的頁面路由觸發方式及頁面生命周期函數的對應關系。
表3-5 頁面路由觸發方式及頁面生命周期函數的對應關系
| 路由方式 | 觸發時機 | 路由前頁面生命周期 | 路由后頁面生命周期 |
|---|---|---|---|
| 初始化 | 小程序打開的第一個頁面 | onLoad, onShow | |
| 打開新頁面 調用 | API wx.navigateTo | onHide | onLoad, onShow |
| 頁面重定向 調用 | API wx.redirectTo | onUnload | onLoad, onShow |
| 頁面返回 調用 | API wx.navigateBack | onUnload | onShow |
| Tab | 切換 調用 API wx.switchTab | 請參考表3-6 | 請參考表3-6 |
| 重啟動 | 調用 API wx.reLaunch | onUnload | onLoad, onShow |
Tab 切換對應的生命周期（以 A、B 頁面為 Tabbar 頁面，C 是從 A 頁面打開的頁面，D 頁面是從 C 頁面打開的頁面為例）如表3-6所示，注意Tabbar頁面初始化之后不會被銷毀。
表3-6 頁面路由觸發方式及頁面生命周期函數的對應關系
| 當前頁面 | 路由后頁面 | 觸發的生命周期（按順序） |
|---|---|---|
| A | A | 無 |
| 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() |
.