什麼是路由？

我們通常理解的路由指分組封包從來(lái)源到目的地時(shí)，決定端到端路徑的網(wǎng)路範(fàn)圍的進(jìn)程；

借用上面的定義，我們可以理解小程式頁(yè)面路由，根據(jù)路由規(guī)則（路徑）從一個(gè)頁(yè)面跳到另一個(gè)頁(yè)面的規(guī)則。

透過(guò)本篇文章，你可以學(xué)習(xí)到：

1. 哪些情況會(huì)觸發(fā)頁(yè)面跳轉(zhuǎn)

2. 如何跳轉(zhuǎn)頁(yè)面

3. 頁(yè)面?zhèn)鲄?/p>

4. 頁(yè)面堆疊

一、哪些狀況會(huì)觸發(fā)頁(yè)面跳轉(zhuǎn)

1. 小程式啟動(dòng)，初始化第一個(gè)頁(yè)面

2. #開(kāi)啟新頁(yè)面，呼叫API wx.navigateTo 或使用<navigator />元件

3. 頁(yè)面重新導(dǎo)向，呼叫API wx.redirectTo 或使用<navigator />元件

4. 頁(yè)面返回，呼叫API wx.navigateBack或使用者按左上角返回按鈕

5. tarbar切換

##所有頁(yè)面都必須在app.json中註冊(cè),例如：

{
    "pages": [
        "pages/index/index",
        "pages/logs/index"
    ]
}

二、如何跳轉(zhuǎn)頁(yè)面

1. 使用wx.navigateTo介面跳轉(zhuǎn),

   原頁(yè)面保留
。

2. wx.navigateTo({
       //目的頁(yè)面地址
       url: 'pages/logs/index',
       success: function(res){},
       ...
   })

   使用wx.redirectTo介面跳轉(zhuǎn)，

   關(guān)閉原始頁(yè)面,不能返回

   。

   wx.redirectTo({
       //目的頁(yè)面地址
       url: 'pages/logs/index',
       success: function(res){},
       ...
   })

   3.使用元件

   <navigator url="pages/logs/index" hover-class="navigator-hover">跳轉(zhuǎn)</navigator>

當(dāng)元件加入redirect屬性時(shí)，等同於wx.redirectTo介面；預(yù)設(shè)redirect屬性為false，等同於wx.navigateTo介面。

3. 使用者點(diǎn)選左上角返回按鈕，或呼叫wx.navigateBack介面返回上一頁(yè)。

   wx.navigateBack({
   delta: 1
   })

delta為1時(shí)表示返回上一頁(yè)，為2時(shí)表示上一頁(yè)，以此類(lèi)推；如果da??lta大於已開(kāi)啟的頁(yè)面總數(shù)，則返回首頁(yè)。返回後，元介面會(huì)銷(xiāo)毀。

》》》頁(yè)面跳轉(zhuǎn)傳值

其實(shí)這個(gè)很簡(jiǎn)單,形如：

url?key=value&key1=value1

經(jīng)過(guò)測(cè)試，傳遞的參數(shù)沒(méi)有被URIEncode ,傳遞中文沒(méi)有亂碼。參數(shù)長(zhǎng)度未測(cè)試。

三、如何正確使用頁(yè)面跳轉(zhuǎn)官方規(guī)定小程式最多只能有五個(gè)頁(yè)面同時(shí)存在，意思是在不關(guān)閉頁(yè)面的情況，最多新開(kāi)五個(gè)頁(yè)面，

。
對(duì)於可逆操作，使用wx.navigateTo,例如從首頁(yè)跳到二級(jí)頁(yè)面，從二級(jí)頁(yè)面返回是不需要重新渲染首頁(yè)
對(duì)於不可逆操作，使用wx.redirectTo,例如使用者登入成功後，關(guān)閉登入頁(yè)面，不能返回登入介面。
對(duì)於一些介紹等不常用頁(yè)面wx.redirectTo或wx.navigatrBack
對(duì)於類(lèi)似九宮格、列表項(xiàng)，使用
不要在首頁(yè)使用wx.redirectTo，這樣會(huì)導(dǎo)致應(yīng)用程式無(wú)法返回首頁(yè)
簡(jiǎn)化需求、簡(jiǎn)化流程；核心功能在兩三個(gè)頁(yè)面完成便是張小龍追求『小而美』的體現(xiàn)

四、頁(yè)面堆疊
頁(yè)面堆疊以堆疊（先進(jìn)後出）的形式維護(hù)頁(yè)面與頁(yè)面之間的關(guān)係；小程式提供了getCurrentPages()函數(shù)取得頁(yè)面棧，

1. 
   使用wx.navigateTo每新開(kāi)一個(gè)頁(yè)面，頁(yè)面堆疊大小加1,直到頁(yè)面堆疊大小為5為止；

2. 
   使用wx.navigateTo重複開(kāi)啟介面

#上圖中，假如使用wx.navigateTo從四級(jí)頁(yè)面跳到二級(jí)頁(yè)面，此時(shí)會(huì)在頁(yè)面堆疊頂部新增一個(gè)與二級(jí)頁(yè)面初始狀態(tài)一樣的介面，但兩個(gè)頁(yè)面狀態(tài)是獨(dú)立的。

，如果頁(yè)面堆疊大小為5，則wx.navigateTo無(wú)效

1. 
   使用wx.redirectTo重定向

• ###上圖中，假如使用wx.redirectTo從四級(jí)頁(yè)面重定向到二級(jí)頁(yè)面，此時(shí)會(huì)將關(guān)閉四級(jí)頁(yè)面，並使用二級(jí)頁(yè)面取代四級(jí)頁(yè)面，但兩個(gè)頁(yè)面狀態(tài)是獨(dú)立的。 ###此時(shí)的頁(yè)面堆疊大小不變，請(qǐng)注意和使用wx.navigateTo的差異。 ###############使用wx.navigateBack回傳###################上圖中，假如目前頁(yè)面為五級(jí)頁(yè)面，使用wx.navigateBack：############當(dāng)delta為1，關(guān)閉五級(jí)頁(yè)面，目前頁(yè)面為四級(jí)頁(yè)面，頁(yè)面堆疊大小減1;###

• 當(dāng)delta為2，關(guān)閉依序五級(jí)頁(yè)面和四級(jí)頁(yè)面，目前頁(yè)面為三級(jí)頁(yè)面，頁(yè)面堆疊大小減2；

• 以此類(lèi)推，直到棧底為止，也就是首頁(yè)。

以上使用wx.navigateTo、wx.redirectTo、wx.navigateBack頁(yè)面出入堆疊操作對(duì)頁(yè)面堆疊的影響，平常不一定用得上，但還是有必要了解背後的原理。

透過(guò)學(xué)習(xí)頁(yè)面棧，你至少可以知道：

• 小程式運(yùn)行時(shí)你可以取得到已經(jīng)初始化了的頁(yè)面的屬性和方法

• 動(dòng)態(tài)取得目前頁(yè)面路徑

• 頁(yè)自動(dòng)跳轉(zhuǎn)

• 你可以透過(guò)getCurrentPages ()取得頁(yè)面page對(duì)象，執(zhí)行非目前頁(yè)js裡的方法

總結(jié)

• #wx.navigateTo會(huì)增加頁(yè)面堆疊大小，直到頁(yè)面堆疊大小為5

• wx.redirectTo不會(huì)增加頁(yè)面堆疊大小

• ##wx.navigateBack會(huì)減少頁(yè)面堆疊大小，直到頁(yè)面棧大小為1

微信公眾號(hào)平臺(tái)原始碼下載

微信投票源碼

?微信啦啦外送2.2.4解密開(kāi)源版微信魔術(shù)方塊原始碼#

以上是微信開(kāi)發(fā)入門(mén)（八）頁(yè)面路由的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！