uniapp常用路由跳轉(zhuǎn)的幾種方式(navigateTo、redirectTo...)
1. uni.navigateTo 保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面,使用uni.navigateBack
可以返回到原頁面。
示例代碼如下:
uni.navigateTo({ url:'./home/index' });
注意:
頁面跳轉(zhuǎn)路徑有層級限制,不能無限制跳轉(zhuǎn)新頁面跳轉(zhuǎn)到 tabBar 頁面只能使用switchTab
跳轉(zhuǎn)路由API的目標(biāo)頁面必須
是在pages.json里注冊的vue頁面。如果想打開web url,具體可參考【uniapp官方-路由與頁面跳轉(zhuǎn)】
2. uni.navigateBack(關(guān)閉當(dāng)前頁面,返回上一頁面或多級頁面)
示例代碼如下:
// 在第3級頁面內(nèi) navigateBack,將返回第一層頁面 uni.navigateBack({ delta: 2 });
注意:
- 可通過
getCurrentPages()
方法 獲取當(dāng)前的頁面棧,決定需要返回幾層。 - 常用參數(shù)
delta
,默認(rèn)為1
,含義是:返回的頁面數(shù),如果 delta 大于現(xiàn)有頁面數(shù),則返回到首頁。
3. redirectTo(關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到其他頁面)
示例代碼如下:
uni.redirectTo({ url:'./home/index' })
注意:
- 需要跳轉(zhuǎn)的應(yīng)用內(nèi)
非 tabBar
的頁面的路徑,路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?
分隔,參數(shù)鍵與參數(shù)值用=
相連,不同參數(shù)用&
分隔;如 ‘path?key=value&key2=value2’ - 轉(zhuǎn)到 tabBar 頁面只能使用 switchTab 跳轉(zhuǎn)
4. reLaunch(關(guān)閉所有頁面,跳轉(zhuǎn)到其他頁面)
示例代碼如下:
uni.reLaunch({ url:'./home/index' })
注意:
- 需要跳轉(zhuǎn)的應(yīng)用內(nèi)頁面的路徑,路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔,參數(shù)鍵與參數(shù)值用=相連,不同參數(shù)用&分隔;如 ‘path?key=value&key2=value2’
- 轉(zhuǎn)到 tabBar 頁面則不能帶參數(shù)
- H5端調(diào)用uni.reLaunch之后之前頁面棧會銷毀,但是無法清空瀏覽器之前的歷史記錄,此時(shí)navigateBack不能返回,如果存在歷史記錄的話點(diǎn)擊瀏覽器的返回按鈕或者調(diào)用history.back()仍然可以導(dǎo)航到瀏覽器的其他歷史記錄。
- 如果調(diào)用了 uni.preloadPage() 不會關(guān)閉,僅觸發(fā)生命周期 onHide
5. switchTab(適用于底部導(dǎo)航欄之間的跳轉(zhuǎn),或者跳轉(zhuǎn)到底部導(dǎo)航欄(跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面。))
示例代碼如下:
uni.switchTab({ url: './home/index' });
注意:
- 需要跳轉(zhuǎn)的 tabBar 頁面的路徑(需在 pages.json 的 tabBar 字段定義的頁面),路徑后不能帶參數(shù)
更多細(xì)節(jié),可參考:【uniapp官方-路由與頁面跳轉(zhuǎn)】
補(bǔ)充:uni-app中的一些路由跳轉(zhuǎn)區(qū)別
總結(jié)一下
navigateTo,redirectTo只能打開非tabBar頁面(例如列表到詳情)
switchTab只能打開tabBar頁面(tabBar之間的傳參等)
reLaunch可以打開任意頁面
頁面底部的tabBar由頁面決定,就是只要時(shí)定義為tabBar的頁面,底部都有tabBar,不能再App.vue里面進(jìn)行頁面跳轉(zhuǎn)
uni.navigateTo({ url:'跳轉(zhuǎn)的路徑?id=xxx&alue=xxx', }) 傳遞的參數(shù)在跳轉(zhuǎn)到的頁面可以在onLoad:function(option){ option就是傳遞的參數(shù) }
需要跳轉(zhuǎn)的應(yīng)用內(nèi)非tabBar的頁面,其實(shí)就是在pages.json里面配置的頁面都不能跳轉(zhuǎn)詳情請看官網(wǎng)uni-app路由跳轉(zhuǎn)
注意:
1:頁面跳轉(zhuǎn)路徑有層級限制,不能無限制跳轉(zhuǎn)新頁面
2:跳轉(zhuǎn)到 tabBar 頁面只能使用 switchTab 跳轉(zhuǎn)
uni.redirectTo({
url:'跳轉(zhuǎn)的路徑'
需要跳轉(zhuǎn)的應(yīng)用內(nèi)非tabBar的頁面的路徑,
})
注意是關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面,跳轉(zhuǎn)到 tabBar 頁面只能使用 switchTab 跳轉(zhuǎn)
uni.reLaunch({ url: 'test?id=1' });
關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個(gè)頁面。如果跳轉(zhuǎn)的頁面路徑是 tabBar 頁面則不能帶參數(shù)。
uni.switchTab({ url: '/pages/index/index' 需要跳轉(zhuǎn)的 tabBar 頁面的路徑(需在 pages.json 的 tabBar 字段定義的頁面),路徑后不能帶參數(shù) });
跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面。
// 此處是A頁面 uni.navigateTo({ url: 'B?id=1' }); // 此處是B頁面 uni.navigateTo({ url: 'C?id=1' }); // 在C頁面內(nèi) navigateBack,將返回A頁面 uni.navigateBack({ delta: 2 });
關(guān)閉當(dāng)前頁面,返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當(dāng)前的頁面棧,決定需要返回幾層。
總結(jié)
到此這篇關(guān)于uniapp常用路由跳轉(zhuǎn)的幾種方式的文章就介紹到這了,更多相關(guān)uniapp路由跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript使用switch case實(shí)現(xiàn)動(dòng)態(tài)改變超級鏈接文字及地址
這篇文章主要介紹了javascript使用switch case實(shí)現(xiàn)動(dòng)態(tài)改變超級鏈接文字及地址,需要的朋友可以參考下2014-12-12javascript記錄文本框內(nèi)文字個(gè)數(shù)檢測文字個(gè)數(shù)變化
要對文本框中用戶輸入的文字進(jìn)行記數(shù),在下面顯示出來,經(jīng)研究找到個(gè)不錯(cuò)的方法,可以完美解決在刪除文字后,字?jǐn)?shù)變化問題2014-10-10JavaScript實(shí)現(xiàn)日期格式化的操作詳解
在我們做業(yè)務(wù)開發(fā)的漫長歲月里,會多次跟時(shí)間打交道,相信大多數(shù)小伙伴對日期格式化也并不陌生,本文簡單記錄了JavaScript實(shí)現(xiàn)日期格式化的過程,以及一些拓展,希望對大家有所幫助2023-05-05什么是cookie?js手動(dòng)創(chuàng)建和存儲cookie
cookie 是存儲于訪問者的計(jì)算機(jī)中的變量,在這個(gè)例子中我們要?jiǎng)?chuàng)建一個(gè)存儲訪問者名字的 cookie,需要的朋友可以參考下2014-05-05js字母大小寫轉(zhuǎn)換實(shí)現(xiàn)方法總結(jié)
本文是對js中字母大小寫轉(zhuǎn)換的實(shí)現(xiàn)方法進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11使用Turn.js實(shí)現(xiàn)翻書效果的完整步驟
最近項(xiàng)目經(jīng)理我個(gè)項(xiàng)目練練手,其項(xiàng)目需求是要實(shí)現(xiàn)翻書效果,下面這篇文章主要給大家介紹了關(guān)于使用Turn.js實(shí)現(xiàn)翻書效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12