前言：
对于小程序的页面路由，如果没有一定开发经验的话，理解起来还是会有些困难的。哪怕是有一定小程序开发经验的开发者，能够完全理解掌握的恐怕也不多。
这里就以另外一种方式来详细的介绍小程序的页面栈及路由方式，相信看了本文你能更深入的了解小程序的页面路由的。
模拟场景：
小程序的页面路径基本上都可以用PC端浏览器来模拟，如：
小程序页面栈 |
类似于 |
浏览器页面栈 |
小程序的初始化（新页面入栈） |
——— |
打开浏览器默认加载首页 |
小程序打开新页面（新页面入栈）
|
——— |
浏览器在新标签中访问网址或者点击当前页面链接新标签页打开页面
|
页面返回（当前页面出栈，新页面入栈）
|
——— |
浏览器返回上一页
|
。。。。。。
|
如果说小程序的官方文档比较抽象，那么转换成浏览器来理解就应该容易的多了。
下面会结合官方相关文档，以浏览器为例进行详细解析。
页面路由：
小程序所有页面的路由全部由框架进行管理。
页面栈：
框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如下：
| 路由方式 | 页面栈表现 | pc端浏览器模拟 |
|---|---|---|
|
初始化（打开小程序，进入首页） |
新页面入栈 |
打开浏览器自动打开默认首页 |
| 打开新页面 | 新页面入栈 |
1. 浏览器打开新标签页访问网址； 2. 他页面中点击链接新窗口打开页面 |
| 页面重定向 | 当前页面出栈，新页面入栈 |
1. 当前页面点击链接在当前页面打开； 2. 当前页面地址栏输入其他网址访问； 3. 在当前页面点击书签栏中的书签（设置在当前页面打开书签） |
| 页面返回 | 页面不断出栈，直到目标返回页 | 点击浏览器的返回按钮返回上一页 |
| Tab 切换 | 页面全部出栈，只留下新的 Tab 页面 |
这个可能有点不好理解，不过还是可以用浏览器解释的： 小程序的Tab页可看做一个浏览器打开的不同窗口，这些窗口相互之间不影响，从Tab页打开其他非Tab页面可看做在浏览器一个窗口页面中在当前页面进入其他页面，从这个角度来看，就容易理解的多了 |
| 重加载 | 页面全部出栈，只留下新的页面 |
这个就不太好举例了，可以理解为重启浏览器，只不过重启后可以打开指定页面 |
如果还是有点看不懂，下边将会在路由方式中进行详细介绍：
对于路由的触发方式以及页面生命周期函数如下：
| 路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
|---|---|---|---|
| 初始化 | 小程序打开的第一个页面 | onLoad, onShow | |
| 打开新页面 | 调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>
|
onHide | onLoad, onShow |
| 页面重定向 | 调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>
|
onUnload | onLoad, onShow |
| 页面返回 | 调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮 |
onUnload | onShow |
| Tab 切换 | 调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab |
各种情况请参考下表 | |
| 重启动 | 调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>
|
onUnload | onLoad, onShow |