在上一篇章中我們了解了Router的一種跳轉方式和返回，其中我們了解到pushUrl這種跳轉方式必須傳遞的一個參數是我們需要跳轉到的對應頁面的url地址。在上一篇章中我們也了解到這種方式是可以進行跨模塊轉的，也就是
我們可以跳轉到其他的模塊，這需要我們在url中添加對應的模塊和我們這個包的名稱，使用示例如下：
[router2.mp4]
https://live.csdn.net/v/470057
|
import { router } from '@kit.ArkUI'
@Entry
@Component
struct Router1Page {
build() {
Column() {
Button("Router跨模塊跳轉pushUrl")
.onClick(() => { router.pushUrl({ url: "@bundle:xxxx.DUIDemo/library/ets/pages/Index" }) })
}
}
}
|
|
@Entry
@Component
struct Index {
@State message: string = '我是hsp模塊的頁面';
build() {
Row() {
Column() {
Text(this.message)
.fontSize($r('app.float.page_text_font_size'))
.fontWeight(FontWeight.Bold)
.onClick(() => {
this.message = 'Welcome';
})
}
.width('100%')
}
.height('100%')
}
}
|
其中從第一段代碼中我們便可以看出，使用pushUrl這種方式可以進行跨模塊跳轉，但是需要多傳遞一些參數，需要傳遞你這個包的名稱和這個包下那個模塊。
其中包的名稱我們從工程的根目錄下的AppScope下的app.json5文件下的bundleName中，這個bundleName就是我們需要傳遞到@bundle:后的名稱， 然后例如我這個目錄
![]()
我給另外一個模塊命名為library所以在包名的后面跟上我們對應的名稱便可以，然后我們跳過其中的scr，main，直接從ets這個目錄開始傳遞我們想要跳轉頁面的路徑
這樣我們就完成了跨模塊的跳轉了。
接下來我們講解一下正常跳轉中給跳轉頁面進行傳遞參數
我們知道pushUrl中有個可選的參數是params ，演示如下
![]()
![]()
|
import { router } from '@kit.ArkUI'
@Entry
@Component
struct Router1Page {
build() {
Column() {
Button("Router跨模塊跳轉pushUrl")
.onClick(() => {
router.pushUrl({
url: "pages/router/Router2Page",
params: {
Name: "跳轉傳參"
}
})
})
}
}
}
|
|
import { router } from '@kit.ArkUI'
@Entry
@Component
struct Router2Page {
@State params: string = ""
aboutToAppear(): void {
this.params = JSON.stringify(router.getParams())
}
build() {
Column() {
Text(this.params)
.fontSize(28)
Button("點擊返回")
.onClick(() => {
router.back({
url: "pages/router/Router1Page"
})
})
}
}
}
|
從代碼塊一中我們可以看的出來傳遞參數就是直接跟在Url的后面，因為它是object類型所以我們要進行Json的解析或者斷言成我們傳遞的類型。
我們在代碼塊二中，調用aboutToAppear生命周期函數，在里面在調用router.getParams函數獲取我們傳遞過來的參數。
Harmony OS NEXT API12
本次就暫時介紹這么多， 在下一篇內容中我會給大家介紹一下樣式復用的修飾器
謝謝各位的觀看，有錯誤不足的地方， 本人樂于接受各位的意見
浙公網安備 33010602011771號