剛開始用小程序的時候沒怎么在意頁面的跳轉，也沒仔細看文檔中說的頁面棧的內容。只要能跳轉就行，wx.navigateTo,wx.redirectTo 這些方法一頓亂用。最后在做一個5層頁面的時候跳懵了。各種重復跳頁，怎么改都不好使，於是安心下來仔細看看API，發現這個路由還是有學問的。因此分享一下，希望對做小程序的網友也有一定的幫助。
頁面棧
首先我們要理解在小程序中頁面的路由是小程序框架本身控制的我們不要去手動管理， 小程序框架通過一個頁面棧的設計來管理所有的界面，為了便於理解你可以看一下示意圖。
如圖所示小程序的頁面棧最大能存放5個頁面，當頁面棧中的頁面等於5時，在使用navigateTo這種方式是不能再跳頁的。
下面我們分析一下頁面棧的變化過程，從分析中，我們需要明白的一個重要問題就是，當客戶按返回按鈕的時候究竟會跳轉到那個界面，這是我們分析頁面棧變化的的意義。
首先我們在頁面中調用兩次navigateTO，頁面棧情況如下
這時顯示的界面是pageC ，如果客戶在此時返回則會一切正常，回退的第一個界面是pageB，然后是pageA。但是如果在pageC 界面調用 wx.redirectTo({url:'pageD'}) 則情況就會不一樣看，我們先看一下跳轉到pageD后頁面棧的情況如何。
根據棧的情況，我們可以分析出。如果使用 wx.redirectTo跳轉到pageD頁面，然后在回退的時候是不能再次回退到pageC的，而會直接回退到pageB。
通過上面對頁面棧的分析，我們可以看到棧的變化是會影響客戶回退頁面的順序的，所以根據自己的需要合理的使用不同的跳轉方法是非常重要的。如果使用不當就會導致跳轉混亂讓人摸不清頭腦
下面分析一種調轉重復頁面的情況
如果我們的pageB頁面是一個數據列表頁面，比如商品列表，pageC是一個商品的編輯界面，一般我們會通過pageB然后進如pageC對商品進行修改，修改后返回pageB。這是很常見的一個場景，但是如果使用不當機會出現如下情況
如圖所示棧中出現了兩個相同的pageB界面，這個時候如果用戶按退出鍵就會出現一個頁面出現2次的情況，而且有一個界面的數據也是舊的數據。因此為了避免這個問題，我們應該在 PageC 頁面避免將 PageB重復壓入棧中，所以在pageC頁面 使用wx.navigateBack({delta:1}); 進行頁面回退。而數據刷新的問題則在頁面的onShow函數中進行即可。
路由方法與頁面棧變化對應關系
| 路由方式 | 頁面棧表現 | 觸發時機 |
|---|---|---|
| 初始化 | 新頁面入棧 | 小程序打開的第一個頁面 |
| 打開新頁面 | 新頁面入棧 | 調用 API wx.navigateTo 或使用組件 <navigator open-type="navigateTo"/> |
| 頁面重定向 | 當前頁面出棧，新頁面入棧 | 調用 API wx.redirectTo 或使用組件 <navigator open-type="redirectTo"/> |
| 頁面返回 | 頁面不斷出棧，直到目標返回頁 | 調用 API wx.navigateBack 或使用組件<navigator open-type="navigateBack">或用戶按左上角返回按鈕 |
| Tab 切換 | 頁面全部出棧，只留下新的 Tab 頁面 | 調用 API wx.switchTab 或使用組件 <navigator open-type="switchTab"/> 或用戶切換 Tab |
| 重加載 | 頁面全部出棧，只留下新的頁面 | 調用 API wx.reLaunch 或使用組件 <navigator open-type="reLaunch"/> |
小程序官方路由說明 https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html
特別注意 :
navigateTo,redirectTo只能打開非 tabBar 頁面。switchTab只能打開 tabBar 頁面。reLaunch可以打開任意頁面。- 頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar。
- 調用頁面路由帶的參數可以在目標頁面的
onLoad中獲取。