路由基础之Router进阶 原创

在上一篇章中我们了解了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” }) })
}
}
}

typescript
@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
本次就暂时介绍这么多， 在下一篇内容中我会给大家介绍一下样式复用的修饰器
谢谢各位的观看，有错误不足的地方， 本人乐于接受各位的意见