# 頁面路由
在小程序中所有頁面的路由全部由框架進行管理。
### 頁面棧
框架以棧的形式維護了當前的所有頁面。 當發生路由切換的時候,頁面棧的表現如下:
| 路由方式 | 頁面棧表現 |
| --- | --- |
| 初始化 | 新頁面入棧 |
| 打開新頁面 | 新頁面入棧 |
| 頁面重定向 | 當前頁面出棧,新頁面入棧 |
| 頁面返回 | 頁面不斷出棧,直到目標返回頁 |
| Tab 切換 | 頁面全部出棧,只留下新的 Tab 頁面 |
| 重加載 | 頁面全部出棧,只留下新的頁面 |
開發者可以使用?`getCurrentPages()`?函數獲取當前頁面棧。
`getCurrentPages()`?函數用于獲取當前頁面棧的實例,以數組形式按棧的順序給出,第一個元素為首頁,最后一個元素為當前頁面。
頁面棧示例:頁面棧遵循先進后出的規則,當前也在最上面。
### 路由方式
對于路由的觸發方式以及頁面生命周期函數如下:
| 路由方式 | 觸發時機 | 路由前頁面 | 路由后頁面 |
| --- | --- | --- | --- |
| 初始化 | 小程序打開的第一個頁面 | | onLoad, onShow |
| 打開新頁面 | 調用 API?[wx.navigateTo](https://www.w3cschool.cn/weixinapp/weixinapp-1o3938iq.html)
使用組件?`<navigator open-type="navigateTo"/>` | onHide | onLoad, onShow |
| 頁面重定向 | 調用 API?[wx.redirectTo](https://www.w3cschool.cn/weixinapp/weixinapp-5yed38ip.html)
使用組件?`<navigator open-type="redirectTo"/>` | onUnload | onLoad, onShow |
| 頁面返回 | 調用 API?[wx.navigateBack](https://www.w3cschool.cn/weixinapp/weixinapp-r54p38ir.html)
使用組件`<navigator open-type="navigateBack">`
用戶按左上角返回按鈕 | onUnload | onShow |
| Tab 切換 | 調用 API?[wx.switchTab](https://www.w3cschool.cn/weixinapp/weixinapp-t5uz38in.html)
使用組件?`<navigator open-type="switchTab"/>`
用戶切換 Tab | | 各種情況請參考下表 |
| 重啟動 | 調用 API?[wx.reLaunch](https://www.w3cschool.cn/weixinapp/weixinapp-gs3l38io.html)
使用組件?`<navigator open-type="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`中獲取。
- 惠惠軟件-開發自助學習系統
- 一.微信公眾號(服務號)申請流程
- 二.申請所需提前準備資料
- 三.認證微信公眾號:申請微信小程序流程
- 四.微信小程序安裝和開發環境
- 五.微信小程序如何上傳、提交審核、發布操作
- 六.微信小程序開發教程手冊
- 0.1微信小程序 小程序簡介
- 0.2微信小程序 開始第一步
- 0.3微信小程序 小程序代碼構成
- 0.4微信小程序 小程序宿主環境
- 0.5微信小程序 小程序協同工作和發布
- 0.6微信小程序 目錄結構
- 0.7微信小程序 全局配置
- 0.8微信小程序 頁面配置
- 0.9微信小程序 sitemap配置
- 0.10微信小程序 場景值
- 0.11微信小程序 注冊小程序
- 0.12微信小程序 注冊頁面
- 0.13微信小程序 頁面生命周期
- 0.14微信小程序 頁面路由
- 0.15微信小程序 模塊化
- 0.16微信小程序 API
- 0.17微信小程序 運行環境
- 0.18微信小程序 JavaScript支持情況
- 0.19微信小程序 運行機制
- 0.20微信小程序 更新機制
- 0.21微信小程序 廣告·Banner 廣告
- 0.22微信小程序 安全指引·開發原則與注意事項
- 0.23微信小程序 調試
- 0.24微信小程序 啟動性能
- 0.25微信小程序 運行時性能
- 0.26微信小程序 性能分析工具
- 0.27微信小程序 體驗評分
- 八.小程序的美工
- 8.1圖片大小
- 8.2顏色代碼
- 8.3小程序的美工技巧
- 九.微信小程序-定制開發
- 十.微信支付申請流程
- 十一.小程序支付對接流程
- 十二.微信小程序使用中常見問題匯總
- 十二.小程序開發中遇到的問題—匯總
- 十四.小程序問題及解決
- 十五.網站開發定制
- 1.開發定制流程
- 2.搭建網站的過程
- 3.做網站基本費用
- 4.服務器選什么系統更好?
- 十六.常用工具、軟件網站推薦