HarmonyOS路由导航全攻略

在HarmonyOS中实现导航与路由切换，主要通过@ohos.router模块完成。以下为完整实现方案：

1. 基本路由跳转

import router from '@ohos.router';

// 跳转到指定页面
function navigateTo(targetPage: string) {
  router.pushUrl({
    url: `pages/${targetPage}`
  }).catch(err => {
    console.error(`路由跳转失败: ${err}`)
  })
}

// 示例：跳转到详情页
navigateTo('DetailPage')

2. 参数传递与接收

发送参数：

router.pushUrl({
  url: 'pages/DetailPage',
  params: { id: 123, name: '商品A' }
})

接收参数：

// 在目标页面onPageShow中获取
onPageShow() {
  const params = router.getParams();
  console.log(`接收参数: id=${params['id']}, name=${params['name']}`)
}

3. 路由返回与结果传递

// 返回上一页并传递结果
router.back({
  url: 'pages/IndexPage',
  params: { result: '操作成功' }
})

// 接收返回结果
onPageShow() {
  if (router.getParams()?.['result']) {
    showToast(router.getParams()['result'])
  }
}

4. 路由拦截器

实现全局路由守卫：

// 添加前置守卫
router.addBeforeHook(() => {
  if (!isLogin()) {
    showDialog('请先登录')
    return false // 拦截跳转
  }
  return true // 放行
})

// 添加后置守卫
router.addAfterHook(() => {
  logRouteAction() // 记录路由行为
})

5. 动态路由配置

// config.json 片段
"pages": [
  "pages/IndexPage",
  "pages/DetailPage",
  "pages/ProfilePage"
]

6. 导航栏控制

// 隐藏导航栏
router.setPageParams(this, {
  navigationBarHidden: true
})

// 修改标题
router.setPageParams(this, {
  title: '新标题'
})

关键API说明

最佳实践

1. 路由命名规范：采用模块/功能的层级命名（如product/detail）
2. 参数验证：使用zod或class-validator验证路由参数
3. 路由懒加载：通过router.dynamicImport实现按需加载
4. 异常处理：统一封装路由错误处理逻辑
5. 路由动画：通过router.setPageParams配置页面切换动画

注意：实际开发中需在config.json中声明所有路由页面，页面路径最大深度不超过32级。对于复杂应用，建议使用Navigator组件实现容器内导航。