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

頁面棧

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

?

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

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

首先我們?cè)陧撁嬷姓{(diào)用兩次navigateTO，頁面棧情況如下

?

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

?

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

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

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

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

?

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

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

特別注意:

navigateTo,redirectTo只能打開非 tabBar 頁面。

switchTab只能打開 tabBar 頁面。

reLaunch可以打開任意頁面。

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

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