uni-app 頁面 路由navigate
uni-app
是一個使用 Vue.js 開發跨平台應用的前端框架,開發者編寫一套代碼,可編譯到iOS、Android、H5、小程序等多個平台。
公司最近在寫APP應用到了uni-app 我在寫的時候發現了一些路由跳轉的問題 。 先說一下關於路由的各個接口把,各參數參數說明詳見官網https://uniapp.dcloud.io/api/router?id=navigateto
1.uni.navigateTo(OBJECT) 保留當前的頁面跳轉到應用內的某個頁面,使用uni.navigateBack 可以返回到原頁面
通過參數URL進行跳轉 如果是跳轉非tabBar頁面的路徑,路徑后面是可以攜帶參數的,參數與路徑之間使用?分隔參數建與參數值用=相連,不同參數用&分隔,,,,傳遞后的參數可以在目標頁面的onload函數可得到傳遞的參數
toSuccessBuy() { uni.navigateTo({ url: '/pages/buytest/SuccessBuy' //跳轉到pages下buytest文件下面的SuccessBuy.vue文件 }) }
但是要注意:目標頁面必須是在pages.json里面注冊的vue頁面,如果要是想打開web url,在app平台可以使用plus.runtime.openURL或web-view組件
不能在APP.vue里面進行跳轉
跳轉到tabBar的時候不能使用uni.navigateTo進行跳轉,只能使用switchTab進行跳轉
2. uni.redirectTo(OBJECT) 關閉當前頁面,跳轉到應用內的某個頁面。(不可以使用uni.navigateBack返回,使用uni.redirectTo時當前頁面已經被關閉,無法返回,但是可以返回到當前頁面的上一個頁面 )
toThree(){ 上一級頁面 One.vue uni.redirectTo({ 當前頁面 Two.vue url:'/pages/buytest/Three' 目標頁面 Three.vue }) 從當前Two跳轉到目標頁面Three,Two頁面使用uni.redirect關閉當前Two頁面並跳轉到Three,Three返回時Two頁面已經關閉,返回到One頁面 }
3.uni.reLaunch(OBJECT) 關閉所有頁面,打開到應用的某個頁面 (他與uni.navigateTo 的區別就是,uni.reLaunch關閉所有頁面進入新的頁面 ,uni.navigateTo是保留當前頁面並跳入最新頁面 ,)
toBuyTestOne(){ uni.reLaunchTo({ url:'/pages/buytest/BuyTestOne' }) },
4.uni.switchTab(OBJECT) 跳轉到tabBar頁面,並關閉其他所有非tabBar頁面 (設置url路徑時,需要跳轉的tabBar頁面的路徑必須是在pages.json的tabBar字段定義的頁面,並且!!!路徑的后面不可以攜帶參數)
//pages.json { "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首頁" },{ "pagePath": "pages/other/other", "text": "其他" }] } }
//other.vue uni.switchTab({ url: '/pages/index/index' });
5. uni.navigateBack(OBJECT) 關閉當前頁面,返回上一級或者多級頁面。可通過getCurrentPages()獲取當前的頁面棧,決定返回幾層
重點來咯!!!
我在做這個頁面返回的時候就遇到了一個幾乎接近於死循環的問題,我用uni.navigateTo跳轉到下一個頁面A->B->C->A這樣連續跳轉五六次以后,想在跳到A頁面的時候直接退出到別的頁面,但是使用uni.navigateBack返回時,會連續反方向返回五六次,簡而言之就是怎么來的怎么回去,但是發現根本達不到自己想要的效果,若是使用uni.navigateTo定向跳轉的時候,會發現返回的時候是一樣的,返回的上一個頁面,甚至於更啰嗦,后來我仔細翻了翻文檔,發現了多級返回這個東東,但是由於客戶的不斷點擊,自己並不知道客戶到底點擊了多少層,以至於我就又發現了getCurrentPages()這個法寶,它是用來獲取到當前頁面的頁面棧,而你想要回到第幾層頁面時,用獲取到的頁面棧的層數減去想回到的第幾層就可以了,上代碼
back() { let pages = getCurrentPages(); // 獲取當前頁面棧層數 例如16 let backPages = pages.length - 1; // 當前層數減一獲取要跳轉的頁面的層數 15 uni.navigateBack({ delta: backPages //跳轉十五層 回到第一層頁面 }) } ,
參數delta :類型為number 指的是返回的頁面數,如果delta大於現有的頁面數,會直接返回首頁的
這個是限於你的返回按鈕是自己定義的那種,如果你選擇了uni-app默認的返回,請加上onBackPress()生命周期函數,用來對返回頁面進行監聽
這樣就可以達到效果了,想返回幾層就返回幾層,想跳轉到哪個頁面就跳到到哪個頁面,誒~,媽媽再也不用擔心我跳不過去了~~~
最后 請注意!
1.navigateTo,redirectTo 只能打開非tabBar頁面
2.switchTab 只能打開tabBar頁面
3.reLaunch 可以打開任意頁面