[[383200]]

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

在項目中，頁面之間的路由跳轉(zhuǎn)是十分普遍的。鴻蒙JS開發(fā)提供了四種頁面跳轉(zhuǎn)的方式（輕量級智能穿戴僅支持replace()），之前的帖子中也有涉及到一些，本文將詳解這四個API并與微信小程序中類似的頁面跳轉(zhuǎn)方式做比較。

鴻蒙頁面路由需導(dǎo)入router模塊。import router from '@system.router';

1、router.push()&wx.navigateTo()

這兩個方法都是壓棧式跳轉(zhuǎn)，即將跳轉(zhuǎn)到的目標(biāo)頁面“壓”在源頁面上，源頁面不銷毀，按返回鍵即可返回源頁面。

router.push()有兩個參數(shù)，uri指定頁面路徑，params指定跳轉(zhuǎn)攜帶參數(shù)。在目標(biāo)頁面data中只要有與params中即可接收數(shù)據(jù)，無需寫額外一行代碼。

第一頁 "push 下一頁"按鈕點擊事件：

pushNext() { 
     router.push({ 
         uri: "pages/two/two", 
         params: { 
             method: "push" 
         } 
     }) 
 }, 

data: { 
     method: "", 
     count: 0 
 }, 
 onShow() { 
     this.count = router.getLength(); 
 }, 

router.getLength()可獲取頁面棧中頁面數(shù)量，鴻蒙頁面棧支持最大數(shù)值是32。

此時點擊設(shè)備的返回按鈕，即可返回第一頁。

第二頁 "push 下一頁"按鈕點擊事件:

pushNext() { 
    router.push({ 
        uri: "pages/three/three", 
        params: { 
            data: { 
                name: "HarmonyOS", 
                type: "phone", 
                method: "push" 
            } 
        } 
    }) 
}, 

帶復(fù)雜參數(shù)跳轉(zhuǎn)，也是完全支持的。

微信小程序的wx.navigateTo()方法效果一致，微信小程序中頁面跳轉(zhuǎn)的參數(shù)在url中攜帶，和統(tǒng)一資源定位符的規(guī)則一致。且支持success,fail,complete回調(diào)函數(shù)，也支持雙向事件的觸發(fā)。

第一頁 "navigateTo 下一頁"點擊事件:

naviNext() { 
   wx.navigateTo({ 
     url: '../two/two?method=navigateTo', 
     success: res => { 
       console.log(res) 
     } 
   }) 
 }, 

第二頁需在onLoad()中手動接收參數(shù)，參數(shù)被傳遞到options對象中。

onLoad: function (options) { 
  this.setData({ 
    method: options.method 
  }) 
}, 

如需攜帶復(fù)雜參數(shù)，只能通過events參數(shù)傳遞，且只有navigateTo()支持該參數(shù)。微信小程序支持頁面棧最大頁面數(shù)為10，該方法不支持跳轉(zhuǎn)到app.json中配置的tabBar頁面。

2、router.replace()&wx.redirectTo()

銷毀當(dāng)前頁面并跳轉(zhuǎn)頁面，源頁面在頁面棧中被清除。

router.replace()參數(shù)和router.push()一致，這里主要看頁面棧的頁面數(shù)。

第一頁"replace 下一頁"點擊事件：

replaceNext() { 
    router.replace({ 
        uri: "pages/two/two", 
        params: { 
            method: "replace" 
        } 
    }) 
} 

第二頁"replace 下一頁"點擊事件：

replaceNext() { 
    router.replace({ 
        uri: "pages/three/three", 
        params: { 
            data: { 
                name: "HarmonyOS", 
                type: "phone", 
                method: "replace" 
            } 
        } 
    }) 
} 

連續(xù)點擊replace到第三頁，頁面棧中頁面數(shù)始終為1。

此時若點擊設(shè)備返回鍵，則是退出APP的效果。

wx.redirectTo()效果類似，左上角返回按鈕變?yōu)?quot;home"按鈕。微信小程序的首頁是不會被銷毀的，從redirectTo轉(zhuǎn)到的頁面點擊"home"按鈕也可以返回首頁。

rediNext() { 
   wx.redirectTo({ 
     url: '../two/two?method=redirectTo', 
     success: res => { 
       console.log(res) 
     } 
   }) 
 }, 

3、router.back()&wx.navigateBack()

返回上一頁的方法，鴻蒙支持傳頁面path指定返回的頁面路徑。

第三頁"上一頁、回首頁"點擊事件：

back1() { 
     router.back(); 
 }, 
 back2() { 
     router.back({ 
         path: "pages/index/index" 
     }) 
 }, 

back()方法會將頁面棧中返回目標(biāo)頁面之上的頁面全部清除。如頁面棧中只有1個頁面，back()方法會將APP退出。

微信小程序wx.navigateBack()方法可通過delta參數(shù)指定返回幾層頁面，如果 delta 大于現(xiàn)有頁面數(shù)，則返回到首頁。

naviBack(){ 
  wx.navigateBack({ 
    success: res => { 
      console.log(res); 
    } 
  }) 
}, 
 
naviIndex(){ 
  wx.navigateBack({ 
    delta: 10, 
    success: res => { 
      console.log(res); 
    } 
  }) 
}, 

如果頁面棧中只有1個頁面，此方法將無法觸發(fā)并進入fail回調(diào)。但仍可點擊小程序左上角"home"按鈕返回首頁。

4、router.clear()&wx.reLaunch()

router.clear()是清空頁面棧中其余頁面的方法，僅保留當(dāng)前頁面。

wx.reLaunch()則可以實現(xiàn)清除所有頁面，并轉(zhuǎn)到特定頁面的方法。小程序首頁仍可以通過點擊"home"按鈕返回。

relaNext() { 
  wx.reLaunch({ 
    url: '../three/three?method=reLaunch', 
    success: res => { 
      console.log(res) 
    } 
  }) 
}, 

5、項目實踐

歡迎頁面跳轉(zhuǎn)到首頁，使用replace()。

分類->二級分類->商品列表->商品，使用push()。

商品詳情->首頁，使用replace()并clear()掉多余頁面。

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com