【鸿蒙应用ArkTS开发系列】- 页面跳转及传参_ark ui加载首页携带参数

先看下效果图

大致实现的功能点：

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。

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']
  }

本文到此结束。