本篇文章給大家?guī)?lái)了關(guān)于微信小程序的相關(guān)知識(shí)，其中主要介紹了關(guān)于頁(yè)面路由的相關(guān)內(nèi)容，路由是指分組從源到目的地時(shí)，決定端到端路徑的網(wǎng)絡(luò)范圍的進(jìn)程，下面就一起來(lái)看一下，希望對(duì)大家有幫助。

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

什么是路由？

路由（routing）是指分組從源到目的地時(shí)，決定端到端路徑的網(wǎng)絡(luò)范圍的進(jìn)程。我們可以理解微信小程序頁(yè)面路由，根據(jù)路由規(guī)則（路徑）從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的的規(guī)則。

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

1. 小程序啟動(dòng)，初始化第一個(gè)頁(yè)面
2. 跳轉(zhuǎn)新頁(yè)面，調(diào)用wx.navigateTo 或者 <navigator />
3. 頁(yè)面重定向，調(diào)用wx.redirectTo 或者 <navigator />
4. 頁(yè)面返回，調(diào)用wx.navigateBack ,頁(yè)面左上角返回按鈕
5. wx.switchTab實(shí)現(xiàn)tabBar頁(yè)面切換

Tips: 所有頁(yè)面都必須在app.json中注冊(cè),例如

{
????"pages":?[
????????"pages/index/index",
????????"pages/classification/classification",
????????"pages/start/start",
????????"pages/detail/detail",??
????]
}

二、微信小程序中實(shí)現(xiàn)頁(yè)面路由的幾種方式

1. wx.navigateTo，保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，但是不能跳到 tabbar 頁(yè)面

wx.navigateTo({
??url:?'pages/detail/detail',
??success:?function(res)?{},
??...
})

2. wx.redirectTo,關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面,但是不允許跳轉(zhuǎn)到 tabbar 頁(yè)面

wx.redirectTo({
??url:?'pages/detail/detail',
??success:function(res){},
??...
})

3. <navigator />組件跳轉(zhuǎn)方式

<navigator url=pages/detail/detail">跳轉(zhuǎn)</navigator>

4. wx.navigateBack返回上一頁(yè)

wx.navigateBack({
	delta:?1,
})

Tips: delta為1時(shí)表示返回上一頁(yè)，為2時(shí)表示上上一頁(yè)，以此類推；如果dalta大于已打開的頁(yè)面總數(shù)，則返回到首頁(yè)。返回后，元界面會(huì)銷毀

5. wx.switchTab跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面
   app.json:

{
??"tabBar":?{
????"list":?[{
????????"pagePath":?"pages/index/index",
????????"text":?"首頁(yè)",
????},
????{
????????"pagePath":?"pages/car/car",
????????"text":?"購(gòu)物車",
??????},
???...
??}
}

index.js:

wx.switchTab({
??url:?'pages/car/car'
})

三、小程序路由實(shí)現(xiàn)原理

小程序路由是通過自己實(shí)現(xiàn)的一個(gè)棧(先進(jìn)先出)來(lái)管理的。

當(dāng)我們通過wx.navigateTo或者<navigator/>從A頁(yè)面跳轉(zhuǎn)到B頁(yè)面時(shí)。路由棧的變化是這樣的。

路由棧剛開始只存有頁(yè)面A，當(dāng)使用wx.navigateTo跳轉(zhuǎn)后，頁(yè)面B推入路由棧并展示到界面上，頁(yè)面A隱藏。

當(dāng)我們使用wx.navigateBack返回時(shí)

那么wx.redirectTo與wx.navigateTo有什么區(qū)別呢?

假如當(dāng)前已經(jīng)在二級(jí)頁(yè)面B上，我們使用wx.redirectTo跳轉(zhuǎn)到C頁(yè)面，其過程是這樣的。

如當(dāng)前已經(jīng)在二級(jí)頁(yè)面B上，我們使用wx.redirectTo跳轉(zhuǎn)到C頁(yè)面，其過程是這樣的。
[外鏈圖片轉(zhuǎn)存中…(img-mkPnbKug-1650431194878)]

頁(yè)面B會(huì)被pop出，然后C頁(yè)面再push進(jìn)入棧，這個(gè)時(shí)候棧中還是只有兩個(gè)頁(yè)面。

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

以上是微信小程序之頁(yè)面路由知識(shí)點(diǎn)總結(jié)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！