[[383200]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

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

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

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

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

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

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

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

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

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

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

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

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

帶復雜參數跳轉，也是完全支持的。

微信小程序的wx.navigateTo()方法效果一致，微信小程序中頁面跳轉的參數在url中攜帶，和統一資源定位符的規則一致。且支持success,fail,complete回調函數，也支持雙向事件的觸發。

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

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

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

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

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

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

銷毀當前頁面并跳轉頁面，源頁面在頁面棧中被清除。

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

第一頁"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" 
            } 
        } 
    }) 
} 

連續點擊replace到第三頁，頁面棧中頁面數始終為1。

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

wx.redirectTo()效果類似，左上角返回按鈕變為"home"按鈕。微信小程序的首頁是不會被銷毀的，從redirectTo轉到的頁面點擊"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()方法會將頁面棧中返回目標頁面之上的頁面全部清除。如頁面棧中只有1個頁面，back()方法會將APP退出。

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

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

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

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

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

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

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

5、項目實踐

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

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

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

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com