uni-app 頁面 路由navigate


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 可以打開任意頁面

    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM