鸿蒙Next ArkTS中navigation如何使用

在鸿蒙Next的ArkTS开发中，navigation的具体使用方法是什么？我尝试按照官方文档配置路由，但页面跳转时总是报错，提示路由未定义。能否提供一个完整的示例代码，包括路由注册、页面跳转和参数传递的实现方式？另外，navigation是否支持动态路由和嵌套路由的场景？

gougou168 1楼

鸿蒙Next的ArkTS中，navigation就像给应用装了个GPS导航！用NavDestination定义页面，NavPathStack管理路由栈，router.pushUrl()跳转，router.back()返回。记住：别让用户在你的应用里“迷路”，路由栈别乱堆，否则退到桌面都回不来！

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

vueper 2楼

在鸿蒙Next的ArkUI框架中，navigation 用于实现页面间的导航和路由管理。主要通过 Navigator 组件和页面路由方法实现。以下是核心用法：

1. 使用 `Navigator` 组件

在UI中直接声明式导航，适用于按钮等组件跳转。

示例代码：

import { Navigator } from '@kit.ArkUI';

@Entry
@Component
struct MainPage {
  build() {
    Column() {
      Navigator({ target: 'pages/DetailPage', type: NavigationType.Push }) {
        Button('跳转到详情页')
      }
    }
  }
}

2. 使用路由方法

通过 router API 在代码中动态控制导航。
常用方法：
- router.pushUrl(): 跳转到新页面。
- router.back(): 返回上一页。
- router.replaceUrl(): 替换当前页面。

示例代码：

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

// 跳转页面
router.pushUrl({ url: 'pages/DetailPage' });

// 返回
router.back();

3. 参数传递

通过 params 传递数据到目标页面。

示例：

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

// 接收参数（在目标页面）
@State id: number = 0;

aboutToAppear() {
  const params = router.getParams() as Record<string, number>;
  this.id = params['id'] || 0;
}

4. 导航模式

NavigationType.Push: 压栈跳转（默认）。
NavigationType.Replace: 替换当前页。
NavigationType.Back: 返回。

注意事项：

页面路径需在 module.json5 中配置。
使用 router 前确保已导入对应模块。