前言：
對於小程序的頁面路由，如果沒有一定開發經驗的話，理解起來還是會有些困難的。哪怕是有一定小程序開發經驗的開發者，能夠完全理解掌握的恐怕也不多。
這里就以另外一種方式來詳細的介紹小程序的頁面棧及路由方式，相信看了本文你能更深入的了解小程序的頁面路由的。
模擬場景：
小程序的頁面路徑基本上都可以用PC端瀏覽器來模擬，如：
小程序頁面棧 |
類似於 | 瀏覽器頁面棧 |
小程序的初始化（新頁面入棧） |
——— | 打開瀏覽器默認加載首頁 |
小程序打開新頁面（新頁面入棧） |
——— | 瀏覽器在新標簽中訪問網址或者點擊當前頁面鏈接新標簽頁打開頁面 |
頁面返回（當前頁面出棧，新頁面入棧） |
——— | 瀏覽器返回上一頁 |
。。。。。。 |
如果說小程序的官方文檔比較抽象，那么轉換成瀏覽器來理解就應該容易的多了。
下面會結合官方相關文檔，以瀏覽器為例進行詳細解析。
頁面路由：
小程序所有頁面的路由全部由框架進行管理。
頁面棧：
框架以棧的形式維護了當前的所有頁面。當發生路由切換的時候，頁面棧的表現如下：
| 路由方式 | 頁面棧表現 | pc端瀏覽器模擬 |
|---|---|---|
| 初始化（打開小程序，進入首頁） |
新頁面入棧 | 打開瀏覽器自動打開默認首頁
|
| 打開新頁面 | 新頁面入棧 | 1. 瀏覽器打開新標簽頁訪問網址；
2. 他頁面中點擊鏈接新窗口打開頁面
|
| 頁面重定向 | 當前頁面出棧，新頁面入棧 | 1. 當前頁面點擊鏈接在當前頁面打開； 2. 當前頁面地址欄輸入其他網址訪問； 3. 在當前頁面點擊書簽欄中的書簽（設置在當前頁面打開書簽） |
| 頁面返回 | 頁面不斷出棧，直到目標返回頁 | 點擊瀏覽器的返回按鈕返回上一頁 |
| Tab 切換 | 頁面全部出棧，只留下新的 Tab 頁面 | 這個可能有點不好理解，不過還是可以用瀏覽器解釋的：
小程序的Tab頁可看做一個瀏覽器打開的不同窗口，這些窗口相互之間不影響，從Tab頁打開其他非Tab頁面可看做在瀏覽器一個窗口頁面中在當前頁面進入其他頁面，從這個角度來看，就容易理解的多了 |
| 重加載 | 頁面全部出棧，只留下新的頁面 | 這個就不太好舉例了，可以理解為重啟瀏覽器，只不過重啟后可以打開指定頁面 |
如果還是有點看不懂，下邊將會在路由方式中進行詳細介紹：
對於路由的觸發方式以及頁面生命周期函數如下：
| 路由方式 | 路由前頁面 | 路由后頁面 | 瀏覽器模擬 | |
|---|---|---|---|---|
| 初始化 | 小程序首頁 | onLoad, onShow | 瀏覽器打開的第一個頁面初次加載 | |
| 打開新頁面 | wx.navigateTo |
onHide | onLoad, onShow | 在瀏覽器新標簽頁中打開新頁面都會隱藏上一頁並加載新頁面 |
| 頁面重定向 | w |
onUnload | onLoad, onShow | 瀏覽器頁面中打開新的頁面 |
| 頁面返回 | wx.navigateBack |
onUnload | onShow | 當前頁面內打開新頁面，點擊返回按鈕會銷毀新頁面，返回顯示上一頁 |
| Tab 切換 | wx.switchTab |
各種情況請參考下表 | ||
| 重啟動 | wx.reLaunch |
onUnload | onLoad, onShow | 銷毀所有頁面重啟瀏覽器，打開加載新頁面 |
這里尤其需要注意的就是Tab頁了，對於小程序的Tab頁與普通頁面有很大的區別的，最常用的就是只能使用wx.switchTab來跳轉到Tab頁面，否則，超鏈接將無法進行跳轉。
對於Tab頁，可以理解為瀏覽器的不同的標簽頁，不同標簽頁之間相互無影響，可以在新的標簽頁中打開新頁面，也可以在已打開標簽頁內打開新的頁面，下邊將結合官方文檔中關於Tab 切換對應的生命周期進行詳細解析。
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() | 切回A頁面，然后再點B頁面，那么A隱藏，B顯示 |
| C | A | C.onUnload(), A.onShow() | C頁面由A頁面進入，則C頁面進入A頁面，C頁面銷毀，A頁面顯示 |
| C | B | C.onUnload(), B.onLoad(), B.onShow() | 這個就不好用瀏覽器來解釋了，表格后邊直接用小程序Tab頁來細說 |
| D | B | D.onUnload(), C.onUnload(), B.onLoad(), B.onShow() | 這個就不好用瀏覽器來解釋了，表格后邊直接用小程序Tab頁來細說 |
| D（從轉發進入） | A | D.onUnload(), A.onLoad(), A.onShow() | D頁面入口還是A頁面，所以這個同C-->A |
| D（從轉發進入） | B | D.onUnload(), B.onLoad(), B.onShow() | 同C-->B |
對於C-->B可以這樣理解：
如上，Tab頁中都會顯示導航欄的，C頁面由Tab A進入，則由C頁面通過wx.switchTab打開Tab B的時候，Tab B頁面就會顯示導航欄，也就是回到了Tab A/Tab B入口了。
這樣就可以理解為Tab A頁內打開的頁面打開其他Tab頁的時候會銷毀當前頁面並重新加載其他即將打開的Tab頁，這個可能有點繞，可以看下邊的腦圖：
注：
1. 上邊腦圖系實例驗證得出，建議最好是自己寫個完整的demo驗證下，如果能按這個完整走一遍，相信你對Tab 切換對應的生命周期會有不一樣的理解。
2. 上面例子中僅使用了 wx.navigateTo 和 wx.switchTab 兩個 頁面跳轉Api,僅在驗證Tab切換生命周期，感興趣的可以自行驗證其他路由跳轉方式。
示例代碼：
https://developers.weixin.qq.com/s/FGRKgcmu7Y4U