# 頁面路由
在小程序中所有頁面的路由全部由框架進行管理。
### 頁面棧
框架以棧的形式維護了當前的所有頁面。 當發生路由切換的時候,頁面棧的表現如下:
| 路由方式 | 頁面棧表現 |
| ------ | -------------------- |
| 初始化 | 新頁面入棧 |
| 打開新頁面 | 新頁面入棧 |
| 頁面重定向 | 當前頁面出棧,新頁面入棧 |
| 頁面返回 | 頁面不斷出棧,直到目標返回頁,新頁面入棧 |
| Tab 切換 | 頁面全部出棧,只留下新的 Tab 頁面 |
| 重加載 | 頁面全部出棧,只留下新的頁面 |
### getCurrentPages()
`getCurrentPages()` 函數用于獲取當前頁面棧的實例,以數組形式按棧的順序給出,第一個元素為首頁,最后一個元素為當前頁面。
**Tip:不要嘗試修改頁面棧,會導致路由以及頁面狀態錯誤。**
### 路由方式
對于路由的觸發方式以及頁面生命周期函數如下:
| 路由方式 | 觸發時機 | 路由前頁面 | 路由后頁面 |
| ------ | ---------------------------------------- | -------- | -------------- |
| 初始化 | 小程序打開的第一個頁面 | | onLoad, onShow |
| 打開新頁面 | 調用 API [`wx.navigateTo`](https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxnavigatetoobject) 或使用組件 [``](https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html) | onHide | onLoad, onShow |
| 頁面重定向 | 調用 API [`wx.redirectTo`](https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxredirecttoobject) 或使用組件 [``](https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html) | onUnload | onLoad, onShow |
| 頁面返回 | 調用 API [`wx.navigateBack`](https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxnavigateback) 或使用組件[``](https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html)或用戶按左上角返回按鈕 | onUnload | onShow |
| Tab 切換 | 調用 API [`wx.switchTab`](https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxswitchtab) 或使用組件 [``](https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html) 或用戶切換 Tab | | 各種情況請參考下表 |
| 重啟動 | 調用 API [`wx.reLaunch`](https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxrelaunch) 或使用組件 [``](https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html) | 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`中獲取。
- 簡介
- 第一章 公眾號開發
- 使用微信JSSDK
- 接口權限配置
- 分享接口
- 隱藏按鈕項
- 微信支付
- 第二章 小程序開發
- 基礎知識
- 分包加載
- WXSS樣式表
- 配置
- app.json配置
- window
- tabBar
- page.json配置
- 邏輯層
- app.js
- 場景值
- page.js
- 初始化數據
- 生命周期函數
- 頁面相關事件處理函數
- 事件處理函數
- 頁面實例方法
- 路由
- 文件作用域
- 模塊化
- 視圖層
- 模板語法
- 列表渲染
- 條件渲染
- 模板
- 事件
- 引用
- WXS語法規范
- WXS數據類型
- WXS控制流程
- WXS基礎類庫
- 組件
- 視圖容器
- view
- scroll-view
- swiper
- movable-view
- cover-view
- 基礎組件
- icon
- text
- rich-text
- progress
- 表單組件
- button
- checkbox
- form
- input
- label
- picker
- picker-view
- radio
- slider
- switch
- textarea
- 導航組件
- navigator
- 媒體組件
- audio
- image
- video
- camera
- 地圖組件
- map
- 畫布組件
- canvas
- 開放能力
- web-view
- 自定義組件
- 組件模版和樣式
- Component
- 組件傳值
- 組件事件
- Behaviors
- 組件間關系
- 網絡請求
- wx.request
- 微信登錄
- 獲取 openid 和 unionid
- 獲取用戶信息
- 將 wx.request 封裝為 promise
- 上傳圖片接口封裝
- 數據存儲
- 存儲數據和讀取數據
- 獲取數據緩存信息
- 移除數據緩存
- 獲取用戶設置
- openSetting
- getSetting
- 第三章 小游戲開發
- 參考資料