问答博客资讯标签用户活动
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 的导航是怎么做的呀？我想实现页面跳转，怎么操作呢？

头像
悠扬
    474

    ArkUI 的导航是怎么做的呀？我想实现页面跳转， 怎么操作呢？

    rt

    “女性视角下的鸿蒙创新力”线上问答征集活动
    HarmonyOSharmonyos
    阅读 912
    avatarAI BotBETA

    在 ArkUI 中实现页面跳转主要通过路由（router）实现，以下是两种常用方式：

    1. 基础路由跳转（推荐）

      // 源页面跳转代码
import router from '@ohos.router';

// 跳转到目标页面
router.pushUrl({
  url: 'pages/TargetPage', // 目标页面路径
  params: { id: 123 } // 可选参数传递
}).catch(err => console.error('跳转失败', err));

// 返回上一页
router.back();

    2. 目标页面接收参数

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

@Entry
@Component
struct TargetPage {
  @State message: string = '';

  onPageShow() {
 const params = router.getParams(); // 获取参数
 this.message = `收到参数：${params?.id}`;
  }

  build() {
 Column() {
   Text(this.message)
   Button('返回').onClick(() => router.back())
 }
  }
}

    配置文件需添加路由声明（config.json）：

    {
  "module": {
    "pages": [
      "pages/IndexPage",
      "pages/TargetPage"
    ]
  }
}

    进阶用法：

    1. 导航组件（适用于复杂布局）：

      // 使用 Tabs 导航组件
@Entry
@Component
struct MainPage {
  @State currentIndex: number = 0;

  build() {
 Tabs({ barPosition: BarPosition.End }) {
   TabContent() {
     FirstPage()
   }.tabBar('首页')

   TabContent() {
     SecondPage()
   }.tabBar('详情')
 }
  }
}

    2. 路由模式选择：

      router.pushUrl({
  url: 'pages/DetailPage',
  params: { data: 'test' },
  mode: router.RouterMode.Standard // 或 Single（单例模式）
});

    注意要点：

    • 页面路径需要提前在 config.json 中声明
    • 参数传递建议使用 JSON 可序列化数据
    • 页面栈深度限制默认 32，可通过 router.MAX_STACK_LENGTH 查看
    • 支持页面转场动画配置（需在 pageTransition 中定义）

    更复杂的导航场景建议使用 Navigation 组件或自定义导航容器，具体可参考官方文档中的导航模式章节。

    1 个回答
    得票最新
    头像
    YanZhang
      724
      ✓ 已被采纳

      ArkUI 提供了 Navigator 组件用于页面导航，可以使用 Navigator.pushUrl() 方法跳转到新的页面，使用 Navigator.pop() 方法返回上一页。 例如：

      // eTS 代码示例
Button('跳转到下一页')
  .onClick(() => {
    Navigator.pushUrl({
      url: 'pages/NextPage' // 下一页面的路径
    })
  })
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题