# 页面路由
在小程序中所有页面的路由全部由框架进行管理。
### 页面栈
框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:
| 路由方式 | 页面栈表现 |
| --- | --- |
| 初始化 | 新页面入栈 |
| 打开新页面 | 新页面入栈 |
| 页面重定向 | 当前页面出栈,新页面入栈 |
| 页面返回 | 页面不断出栈,直到目标返回页 |
| 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.服务器选什么系统更好?
- 十六.常用工具、软件网站推荐