【鸿蒙应用ArkTS开发系列】- 页面跳转及传参

先看下效果图

大致实现的功能点：

1. 从Indext页面跳转到Second页面，传递两个参数，一个字符串，一个数量；
2. Second获取Index页面传递的数据；
3. Second页面点击返回弹窗；
4. Second页面返回携带参数数据；
5. Index获取Second页面回传数据。

下面我们一个一个讲解：

1、从Indext页面跳转到Second页面，并传递参数

 

import router from '@ohos.router';@Entry
@Component
struct Index {@State message: string = 'Index Page'@State fromSecondMessage: string  = ''build() {Column() {Column() {Text(`${this.message}`).width("300vp").height("60vp").textAlign(TextAlign.Center).fontSize("50fp").fontWeight(FontWeight.Normal)Button("Next").borderRadius("5vp").width("80%").height("50vp").margin({ top: "10vp" }).onClick(this.clickNext.bind(this))Text(this.fromSecondMessage).fontSize('20vp').textAlign(TextAlign.Center).margin({top:'10vp'})}.width("100%").height("100%").justifyContent(FlexAlign.Center)}.width("100%").height("100%")}clickNext() {router.pushUrl({url: "pages/Second",params: {name: '我是来自页面Index的数据',count: 100}}, router.RouterMode.Single)}
}

使用router 进行页面跳转，这里使用pushUrl进行页面跳转，除了pushUrl外，还可以使用replaceUrl进行页面替换，其中参数是RouterOptions对象，主要是url跟params,url是页面路径，params是传递数据，类型为object。

最后面参数是RouterMode.Single，

RouterMode9+

路由跳转模式。

系统能力： SystemCapability.ArkUI.ArkUI.Full。

名称	说明
Standard	标准模式。 目标页面会被添加到页面路由栈顶，无论栈中是否存在相同url的页面。
Single	单实例模式。 如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近的页面会被移动到栈顶，移动后的页面为新建页。 如目标页面的url在页面栈中不存在同url页面，按标准模式跳转。

2、Second获取Index页面传递的数据

import router from '@ohos.router';@Entry
@Component
struct Second {@State message: string = 'Second Page'@State paramsFromIndex: object = router.getParams()build() {Row() {Column() {Text(this.message).margin({ top: "10vp" }).fontSize(50).fontWeight(FontWeight.Normal)Text(this.paramsFromIndex?.['name'] + ",count:" + this.paramsFromIndex?.['count']).margin({ top: "10vp" }).fontSize(20).fontWeight(FontWeight.Normal).margin({top:"10vp"})Button("Back").width("80%").height("50vp").margin({top:"10vp"})}.width('100%')}.height('100%')}}

使用router.getParams()获取Index页面传递的数据。

3、Second页面点击返回弹窗

router.enableBackPageAlert({message: "确认关闭当前页面吗？"})router.back()

调用enableBackPageAlert，触发返回询问弹窗，点击取消，不会触发back方法，点击确定，触发返回。

4、Second页面返回携带参数数据

router.back({url:'pages/Index',params: {src: "这是来自Second Page的数据"}})

5、Index获取Second页面回传数据

回到Index页面后怎么获取Second页面的回传数据呢，也是使用 router.getParams() 进行数据获取，那在什么时候函数里进行获取呢，可以跟Second页面中一样，使用

@State params: object = router.getParams()

这样定义获取吗，其实是不行的，重新回到Index页面后，上述代码并不会执行，这个时候我们应该在页面生命周期函数里进行获取。

  onPageShow() {this.fromSecondMessage = router.getParams()?.['src']}

本文到此结束。