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

示例代碼如下：

uni.navigateTo({
	url:'./home/index'
});

注意：

頁(yè)面跳轉(zhuǎn)路徑有層級(jí)限制，不能無(wú)限制跳轉(zhuǎn)新頁(yè)面跳轉(zhuǎn)到 tabBar 頁(yè)面只能使用 switchTab 跳轉(zhuǎn)路由API的目標(biāo)頁(yè)面必須是在pages.json里注冊(cè)的vue頁(yè)面。如果想打開(kāi)web url，具體可參考【uniapp官方-路由與頁(yè)面跳轉(zhuǎn)】

2. uni.navigateBack（關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面）

示例代碼如下：

// 在第3級(jí)頁(yè)面內(nèi) navigateBack，將返回第一層頁(yè)面
uni.navigateBack({
	delta: 2
});

注意：

• 可通過(guò) getCurrentPages()方法 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層。
• 常用參數(shù)delta，默認(rèn)為1，含義是：返回的頁(yè)面數(shù)，如果 delta 大于現(xiàn)有頁(yè)面數(shù)，則返回到首頁(yè)。

3. redirectTo（關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到其他頁(yè)面）

示例代碼如下：

uni.redirectTo({
	url:'./home/index'
})

注意：

• 需要跳轉(zhuǎn)的應(yīng)用內(nèi)非 tabBar 的頁(yè)面的路徑，路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如 ‘path?key=value&key2=value2’
• 轉(zhuǎn)到 tabBar 頁(yè)面只能使用 switchTab 跳轉(zhuǎn)

4. reLaunch（關(guān)閉所有頁(yè)面，跳轉(zhuǎn)到其他頁(yè)面）

示例代碼如下：

uni.reLaunch({
	url:'./home/index'
})

注意：

• 需要跳轉(zhuǎn)的應(yīng)用內(nèi)頁(yè)面的路徑，路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如 ‘path?key=value&key2=value2’
• 轉(zhuǎn)到 tabBar 頁(yè)面則不能帶參數(shù)
• H5端調(diào)用uni.reLaunch之后之前頁(yè)面棧會(huì)銷毀，但是無(wú)法清空瀏覽器之前的歷史記錄，此時(shí)navigateBack不能返回，如果存在歷史記錄的話點(diǎn)擊瀏覽器的返回按鈕或者調(diào)用history.back()仍然可以導(dǎo)航到瀏覽器的其他歷史記錄。
• 如果調(diào)用了 uni.preloadPage() 不會(huì)關(guān)閉，僅觸發(fā)生命周期 onHide

5. switchTab（適用于底部導(dǎo)航欄之間的跳轉(zhuǎn)，或者跳轉(zhuǎn)到底部導(dǎo)航欄（跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面。））

示例代碼如下：

uni.switchTab({
	url: './home/index'
});

注意：

• 需要跳轉(zhuǎn)的 tabBar 頁(yè)面的路徑（需在 pages.json 的 tabBar 字段定義的頁(yè)面），路徑后不能帶參數(shù)

更多細(xì)節(jié)，可參考：【uniapp官方-路由與頁(yè)面跳轉(zhuǎn)】

補(bǔ)充：uni-app中的一些路由跳轉(zhuǎn)區(qū)別

總結(jié)一下

navigateTo,redirectTo只能打開(kāi)非tabBar頁(yè)面(例如列表到詳情)

switchTab只能打開(kāi)tabBar頁(yè)面(tabBar之間的傳參等)

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

頁(yè)面底部的tabBar由頁(yè)面決定,就是只要時(shí)定義為tabBar的頁(yè)面,底部都有tabBar,不能再App.vue里面進(jìn)行頁(yè)面跳轉(zhuǎn)

uni.navigateTo({
url:'跳轉(zhuǎn)的路徑?id=xxx&alue=xxx',
})
傳遞的參數(shù)在跳轉(zhuǎn)到的頁(yè)面可以在onLoad:function(option){
option就是傳遞的參數(shù)
}

需要跳轉(zhuǎn)的應(yīng)用內(nèi)非tabBar的頁(yè)面,其實(shí)就是在pages.json里面配置的頁(yè)面都不能跳轉(zhuǎn)詳情請(qǐng)看官網(wǎng)uni-app路由跳轉(zhuǎn)

注意：

1:頁(yè)面跳轉(zhuǎn)路徑有層級(jí)限制，不能無(wú)限制跳轉(zhuǎn)新頁(yè)面

2:跳轉(zhuǎn)到 tabBar 頁(yè)面只能使用 switchTab 跳轉(zhuǎn)

uni.redirectTo({
url:'跳轉(zhuǎn)的路徑'
需要跳轉(zhuǎn)的應(yīng)用內(nèi)非tabBar的頁(yè)面的路徑,
})

注意是關(guān)閉當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面,跳轉(zhuǎn)到 tabBar 頁(yè)面只能使用 switchTab 跳轉(zhuǎn)

uni.reLaunch({
    url: 'test?id=1'
});

關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。如果跳轉(zhuǎn)的頁(yè)面路徑是 tabBar 頁(yè)面則不能帶參數(shù)。

uni.switchTab({
    url: '/pages/index/index'
    需要跳轉(zhuǎn)的 tabBar 頁(yè)面的路徑（需在 pages.json 的 tabBar 字段定義的頁(yè)面），路徑后不能帶參數(shù)
});

跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面。

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

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

總結(jié)

到此這篇關(guān)于uniapp常用路由跳轉(zhuǎn)的幾種方式的文章就介紹到這了,更多相關(guān)uniapp路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論