剛開(kāi)始用小程序的時(shí)候沒(méi)怎么在意頁(yè)面的跳轉(zhuǎn)，也沒(méi)仔細(xì)看文檔中說(shuō)的頁(yè)面棧的內(nèi)容。只要能跳轉(zhuǎn)就行，wx.navigateTo,wx.redirectTo 這些方法一頓亂用。最后在做一個(gè)5層頁(yè)面的時(shí)候跳懵了。各種重復(fù)跳頁(yè)，怎么改都不好使，于是安心下來(lái)仔細(xì)看看API，發(fā)現(xiàn)這個(gè)路由還是有學(xué)問(wèn)的。因此分享一下，希望對(duì)做小程序的網(wǎng)友也有一定的幫助。

頁(yè)面棧

首先我們要理解在小程序中頁(yè)面的路由是小程序框架本身控制的我們不要去手動(dòng)管理， 小程序框架通過(guò)一個(gè)頁(yè)面棧的設(shè)計(jì)來(lái)管理所有的界面，為了便于理解你可以看一下示意圖。

?

如圖所示小程序的頁(yè)面棧最大能存放5個(gè)頁(yè)面，當(dāng)頁(yè)面棧中的頁(yè)面等于5時(shí)，在使用navigateTo這種方式是不能再跳頁(yè)的。

下面我們分析一下頁(yè)面棧的變化過(guò)程，從分析中，我們需要明白的一個(gè)重要問(wèn)題就是，當(dāng)客戶(hù)按返回按鈕的時(shí)候究竟會(huì)跳轉(zhuǎn)到那個(gè)界面，這是我們分析頁(yè)面棧變化的的意義。

首先我們?cè)陧?yè)面中調(diào)用兩次navigateTO，頁(yè)面棧情況如下

?

這時(shí)顯示的界面是pageC ，如果客戶(hù)在此時(shí)返回則會(huì)一切正常，回退的第一個(gè)界面是pageB，然后是pageA。但是如果在pageC 界面調(diào)用 wx.redirectTo({url:'pageD'}) 則情況就會(huì)不一樣看，我們先看一下跳轉(zhuǎn)到pageD后頁(yè)面棧的情況如何。

?

根據(jù)棧的情況，我們可以分析出。如果使用 wx.redirectTo跳轉(zhuǎn)到pageD頁(yè)面，然后在回退的時(shí)候是不能再次回退到pageC的，而會(huì)直接回退到pageB。

通過(guò)上面對(duì)頁(yè)面棧的分析，我們可以看到棧的變化是會(huì)影響客戶(hù)回退頁(yè)面的順序的，所以根據(jù)自己的需要合理的使用不同的跳轉(zhuǎn)方法是非常重要的。如果使用不當(dāng)就會(huì)導(dǎo)致跳轉(zhuǎn)混亂讓人摸不清頭腦

下面分析一種調(diào)轉(zhuǎn)重復(fù)頁(yè)面的情況

如果我們的pageB頁(yè)面是一個(gè)數(shù)據(jù)列表頁(yè)面，比如商品列表，pageC是一個(gè)商品的編輯界面，一般我們會(huì)通過(guò)pageB然后進(jìn)如pageC對(duì)商品進(jìn)行修改，修改后返回pageB。這是很常見(jiàn)的一個(gè)場(chǎng)景，但是如果使用不當(dāng)機(jī)會(huì)出現(xiàn)如下情況

?

如圖所示棧中出現(xiàn)了兩個(gè)相同的pageB界面，這個(gè)時(shí)候如果用戶(hù)按退出鍵就會(huì)出現(xiàn)一個(gè)頁(yè)面出現(xiàn)2次的情況，而且有一個(gè)界面的數(shù)據(jù)也是舊的數(shù)據(jù)。因此為了避免這個(gè)問(wèn)題，我們應(yīng)該在 PageC 頁(yè)面避免將 PageB重復(fù)壓入棧中，所以在pageC頁(yè)面 使用wx.navigateBack({delta:1}); 進(jìn)行頁(yè)面回退。而數(shù)據(jù)刷新的問(wèn)題則在頁(yè)面的onShow函數(shù)中進(jìn)行即可。

路由方法與頁(yè)面棧變化對(duì)應(yīng)關(guān)系

特別注意:

navigateTo,redirectTo只能打開(kāi)非 tabBar 頁(yè)面。

switchTab只能打開(kāi) tabBar 頁(yè)面。

reLaunch可以打開(kāi)任意頁(yè)面。

頁(yè)面底部的 tabBar 由頁(yè)面決定，即只要是定義為 tabBar 的頁(yè)面，底部都有 tabBar。

調(diào)用頁(yè)面路由帶的參數(shù)可以在目標(biāo)頁(yè)面的onLoad中獲取。
編輯：hfy