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