鸿蒙Next ArkTS navigation如何实现页面跳转

在鸿蒙Next中使用ArkTS开发时，遇到navigation页面跳转的问题。具体场景是：通过router.pushUrl跳转到新页面后，新页面无法正常加载布局和逻辑，控制台也没有报错信息。请问正确的跳转方式是什么？是否需要特别配置路由或页面生命周期？求一个完整的页面跳转代码示例，包括源页面跳转逻辑和目标页面的声明方式。

2 回复

鸿蒙Next的ArkTS中，页面跳转就像导航去相亲——简单直接！用router.pushUrl()就能跳，比如：

router.pushUrl({
  url: 'pages/NextPage'
})

想返回？router.back()一键撤退！记得在main_pages.json配好路由，别走错片场~

更多关于鸿蒙Next ArkTS navigation如何实现页面跳转的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next的ArkTS中，使用navigation实现页面跳转主要通过router模块完成。以下是基本步骤和示例代码：

1. 配置路由

在module.json5文件中，为每个页面声明路由路径：

{
  "module": {
    "pages": [
      "./src/main/ets/pages/Index",
      "./src/main/ets/pages/Detail"
    ]
  },
  "abilities": [
    {
      "skills": [
        {
          "actions": [
            "action.system.home"
          ],
          "entities": [
            "entity.system.home"
          ]
        }
      ]
    }
  ]
}

2. 页面跳转实现

使用router.pushUrl()方法进行跳转：

import { router } from '@kit.RouterKit';

// 跳转到目标页面
router.pushUrl({
  url: 'pages/Detail'  // 目标页面路径
}, router.RouterMode.Single, (err) => {
  if (err) {
    console.error('跳转失败');
    return;
  }
  console.log('跳转成功');
});

3. 参数传递

跳转时传递参数：

// 发送参数
router.pushUrl({
  url: 'pages/Detail',
  params: { id: 123, name: '示例' }
});

// 接收参数（在目标页面）
import { UIAbility } from '@kit.AbilityKit';

export default class DetailAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage) {
    let params = router.getParams();
    console.log(`接收参数: ${params?.id}, ${params?.name}`);
  }
}

4. 返回上一页

// 方式1：直接返回
router.back();

// 方式2：返回并传递结果
router.back({
  url: 'pages/Index',
  params: { result: '返回数据' }
});

关键说明：

  • RouterMode.Single：单实例模式，相同页面只保留一个实例
  • 页面路径需与module.json5中配置一致
  • 参数通过params对象传递，在目标页面通过router.getParams()获取

这种方式提供了清晰的页面导航管理，支持参数传递和返回结果处理。

回到顶部