目前小程序的幾個頁面跳轉(zhuǎn)方式的主要區(qū)別就兩點：

• 1.是否可以返回上一個頁面
• 2.目標(biāo)頁面是否是tabBar

兩個通用屬性

• 1.限制：目前頁面路徑最多只能十層。
• 2.分類：wx.navigateTo 和 wx.redirectTo不允許跳轉(zhuǎn)到 tabbar 頁面，只能用 wx.switchTab 跳轉(zhuǎn)到 tabbar 頁面

---

下面是對幾個跳轉(zhuǎn)方式的整理說明

---

1. wx.navigateTo({})

保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，使用 wx.navigateBack 可以返回;

關(guān)于Url參數(shù)：

• 不能跳轉(zhuǎn)到tabBar頁面
• 帶參格式：【路徑】?【參數(shù)鍵1】=【參數(shù)值】& 【參數(shù)鍵2】=【參數(shù)值】

wx.navigateTo({url:'../test/test?id=1&page=4',//跳轉(zhuǎn)頁面的路徑，可帶參數(shù)？隔開，不同參數(shù)用 & 分隔；相對路徑，不需要.wxml后綴success:function(){} //成功后的回調(diào)；fail：function(){} //失敗后的回調(diào)；complete：function(){} //結(jié)束后的回調(diào)(成功，失敗都會執(zhí)行) })傳遞的參數(shù)在接收頁面onLoad()函數(shù)中得到值：option.id就可以得到了 onLoad: function (option) {console.log(option)//可以打印一下option看查看參數(shù)this.setData({id:option.id, });

1.1.wx.navigateBack(OBJECT)

關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面。
可通過 getCurrentPages()) 獲取當(dāng)前的頁面棧，決定需要返回幾層。

關(guān)于參數(shù):

delta–>類型：Number，
默認(rèn)值：1 ，
說明：返回的頁面數(shù)，如果 delta 大于現(xiàn)有頁面數(shù)，則返回到首頁。

注意：調(diào)用 navigateTo 跳轉(zhuǎn)時，調(diào)用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

// 此處是A頁面 wx.navigateTo({url: 'B?id=1' })// 此處是B頁面 wx.navigateTo({url: 'C?id=1' })// 在C頁面內(nèi) navigateBack，將返回A頁面 wx.navigateBack({delta: 2 })

2.wx.redirectTo(OBJECT)

關(guān)閉（之前的頁面是回不去的）當(dāng)前頁面，跳轉(zhuǎn)到非tabBar的某個頁面

關(guān)于Url參數(shù)：

• 不能跳轉(zhuǎn)到tabBar頁面
• 【路徑】?【參數(shù)鍵1】=【參數(shù)值】& 【參數(shù)鍵2】=【參數(shù)值】

3.wx.reLaunch(OBJECT)

關(guān)閉（之前的頁面是回不去的）所有頁面，打開到應(yīng)用內(nèi)的某個頁面。

關(guān)于Url參數(shù)：

• 【路徑】?【參數(shù)鍵1】=【參數(shù)值】& 【參數(shù)鍵2】=【參數(shù)值】
• 【如果是跳轉(zhuǎn)到tabBar頁面，則不能帶參數(shù)】

4.wx.switchTab(OBJECT)

跳轉(zhuǎn)到tabBar的某個頁面，并關(guān)閉其他所有非 tabBar 頁面

關(guān)于參數(shù)：

• 目標(biāo)頁面必須是在：app.json 的 tabBar 中定義的頁面
• 不能帶參數(shù)

wx.switchTab({ url: '/pages/home/home' });

5.組件 <navigator>

直接寫在布局里面的跳轉(zhuǎn)方式

參數(shù)說明：
url:和上面幾種方式的規(guī)則一樣，當(dāng)前小程序內(nèi)的跳轉(zhuǎn)鏈接
open-type（跳轉(zhuǎn)方式）：有效值如下表

參數(shù)說明

navigate	對應(yīng) wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	對應(yīng) wx.redirectTo 的功能
switchTab	對應(yīng) wx.switchTab 的功能
reLaunch	對應(yīng) wx.reLaunch 的功能
navigateBack	對應(yīng) wx.navigateBack 的功能

eg:

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

總結(jié)

以上是生活随笔為你收集整理的小程序页面跳转的几个方法和区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。