鸿蒙原生应用如何路由传参

徐建国

发布于 2024-01-17 18:27:07

3660

发布于 2024-01-17 18:27:07

作者：坚果团队：坚果派团队介绍：坚果派由坚果创建，团队拥有8个华为HDE，3个HSD，以及若干其他领域的三十余位万粉博主运营。本人为华为HDE、中国计算机学会CCF专业会员、OpenHarmony布道师、开发者联盟优秀讲师、2023年开源之夏导师、2023年OpenHarmony应用创新赛导师、RISC-V+OpenHarmony应用创意赛导师、OpenHarmony三方库贡献者、开放原子开源基金会技术+生态贡献者第一批开放原子开源讲师、OpenHarmony校源行开源大使、InfoQ签约作者、团队成员聚集在北京，上海，南京，深圳，广州，宁夏等地，欢迎合作。

运行环境

DAYU200:4.0.10.16

SDK：4.0.10.15

IDE：4.0.600

首页

第一步，导入路由模块

import router from '@ohos.router'

第二步，定义Class类

export class Person {
  id: number
  name: string
}

第三步params传递参数

     Button("路由传参").onClick(() => {

          router.pushUrl({
            url: "pages/RouterPage",
            params: {
              id: 1,
              name: "坚果"

            }
          })
        })

第二种形式

Button("路由传参").onClick(() => {

  let Person: Person = {
    id: 1,
    name: "坚果"
  }

  router.pushUrl({
    url: "pages/RouterPage",
    params: Person


  })
}

详情页

第一步，导入模块

import router from '@ohos.router'

第二步定义类

export class Person {
  id: number
  name: string
}

第三步使用 router.getParams()传参

 router.getParams()

第四步

import router from '@ohos.router'

export class Person {
  id: number
  name: string
}

@Entry
@Component
struct RouterPage {
  @State router: Person = router.getParams() as Person

  build() {
    Row() {
      Column() {
        Text(this.router.name)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

总结

这上面的路由传参不仅可以用到router模块。navigator组件同样适用。

Navigator示例

Navigator({ target: "pages/RouterPage" }) {

  Text("路由跳转")


}

设置跳转类型

Navigator({ target: "pages/RouterPage", type: NavigationType.Push }) {

  Text("路由跳转")


}

携带参数

 Navigator({ target: "pages/RouterPage", type: NavigationType.Push }) {

    Text("路由跳转")


  }.params(Person)

}

下面两种是等价的

Navigator({ target: "pages/RouterPage", type: NavigationType.Push }) {

  Text("路由跳转")


}

Text("路由跳转").onClick(() => {

  router.pushUrl({
    url: "pages/RouterPage"
  })
})

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-01-13，如有侵权请联系 cloudcommunity@tencent.com 删除

router