问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在ArkUI中，如何实现页面之间的导航跳转？

头像
lees_0517
    474

    例如从A页面跳转到B页面并传递参数？

    “女性视角下的鸿蒙创新力”线上问答征集活动
    HarmonyOSarkui页面跳转参数传递harmonyos
    阅读 918
    avatarAI BotBETA

    在ArkUI中实现页面跳转及传参主要通过router模块实现，以下是具体实现方式：

    1. 配置路由（在module.json5中声明页面路由）

      "pages": [
  "pages/PageA",
  "pages/PageB"
]

    2. 页面A跳转逻辑（传递参数）

      // PageA.ets
import router from '@ohos.router';

@Entry
@Component
struct PageA {
  build() {
 Column() {
   Button('跳转到PageB')
     .onClick(() => {
       // 携带参数跳转
       router.pushUrl({
         url: 'pages/PageB',
         params: { 
           name: 'ArkUI',
           id: 123 
         }
       })
     })
 }
  }
}

    3. 页面B接收参数

      // PageB.ets
import router from '@ohos.router';

@Entry
@Component
struct PageB {
  private receivedParams: object = router.getParams() || {};

  aboutToAppear() {
 // 获取传递的参数
 console.log('收到参数：', this.receivedParams);
  }

  build() {
 Column() {
   Text(`名称：${this.receivedParams['name']}`)
   Text(`ID：${this.receivedParams['id']}`)
 }
  }
}

    关键点说明：

    • router.pushUrl()：实现页面跳转的核心API
    • params对象：用于携带任意可序列化的参数
    • router.getParams()：在目标页面获取传递的参数
    • 建议在aboutToAppear生命周期获取参数，确保组件已初始化

    扩展特性：

    1. 路由模式：

      router.pushUrl({
  url: 'pages/PageB',
  params: { /*...*/ }
}, router.RouterMode.Standard) // 标准模式（默认）
// 或 router.RouterMode.Single 单例模式

    2. 带回调的返回：

      // 从PageB返回时携带数据
router.back({
  url: 'pages/PageA',
  params: { returnData: '来自B的数据' }
})

// PageA中监听返回参数
onPageShow() {
  const params = router.getParams();
  if (params) {
 console.log('收到返回数据：', params['returnData']);
  }
}
    3. 参数处理建议：
    4. 复杂对象建议使用JSON.stringify()序列化
    5. 敏感数据不要通过路由传递

    6. 使用TypeScript接口规范参数类型

      interface PageParams {
  id: number;
  name: string;
}
    1 个回答
    得票最新
    头像
    Misty
      2
      新手上路，请多包涵
      1. Router 组件： 使用 Router 组件进行页面导航，通过 Router.pushUrl() 方法跳转到目标页面。
      2. 传递参数： 在 pushUrl() 方法的 params 参数中，以 Key-Value 形式传递参数。
      3. 接收参数： 在目标页面 (B 页面) 的 onPageShow() 生命周期方法中，通过 this.routeParams 获取传递的参数。
      // A 页面跳转到 B 页面并传递参数
Router.pushUrl({
  url: 'pages/B',
  params: {
    name: '张三',
    age: 20
  }
})

// B 页面接收参数
onPageShow() {
  console.log('接收到的参数：', this.routeParams); // 输出：{ name: '张三', age: 20 }
}
      “女性视角下的鸿蒙创新力”线上问答征集活动
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题