概述

本教程将详细介绍如何在HarmonyOS应用中实现路由导航功能，包括页面跳转、参数传递、以及导航状态管理等核心内容。我们将通过实际项目中的代码示例来展示这些功能的实现方法。

路由基础

1. 导入路由模块

import router from '@ohos.router';

2. 路由参数定义

class routerParams {
  pageIndex: number

  constructor(pageIndex: number) {
    this.pageIndex = pageIndex
  }
}

class Routmp {
  type: number = 0
  source?: string = ''
  sourceId?: number = 0
}

页面导航实现

1. 获取路由参数

async aboutToAppear() {
  const params = router.getParams() as routerParams
  this.currentPageIndex = params.pageIndex ? params.pageIndex : 0
}

2. 景点详情页面参数获取

onPageShow(): void {
  const myParams: object = router.getParams()
  this.title = myParams['title']
  this.scenicSpotsParentId = myParams['id']
  this.getDetailData()
}

3. 列表页面参数处理

onPageShow(): void {
  let params: Routmp = router.getParams() as Routmp
  this.type = params?.type || 2
  this.source = params?.source || ''
  this.sourceId = params?.sourceId || 0
  this.getHotScenicHandle()
}

导航状态管理

1. 页面索引管理

@State currentPageIndex: number = 0

// 页面切换处理
.onChange(async(index: number) => {
  this.currentPageIndex = index
})

2. 标题管理

@State title: string = '景点详情';

// 更新标题
onPageShow(): void {
  const myParams: object = router.getParams()
  this.title = myParams['title']
}

导航组件实现

1. 底部导航栏

@Builder
BottonNavigation(button: ButtonInfoModel) {
  Column({ space: PageConstants.BUTTON_SPACE }) {
    Image(this.currentPageIndex === button.index ? button.selectImg : button.img)
      .objectFit(ImageFit.Contain)
      .width($r('app.float.main_image_size'))
      .height($r('app.float.main_image_size'))
    Text(button.title)
      .fontColor(this.currentPageIndex === button.index ? 
        $r('app.color.focus_color') : Color.Black)
      .fontWeight(StyleConstants.FONT_WEIGHT_FIVE)
      .fontSize($r('app.float.micro_font_size'))
  }
}

最佳实践

1. 参数传递

• 使用类型定义确保参数类型安全
• 提供默认值处理空参数情况
• 使用可选参数增加灵活性

2. 导航状态管理

• 使用@State管理导航状态
• 实现页面切换回调
• 保持导航状态同步

3. 错误处理

try {
  const params = router.getParams()
  // 参数处理
} catch (error) {
  // 错误处理
  Logger.error('导航参数获取失败', error)
}

总结

通过本教程，我们深入学习了HarmonyOS应用中的路由导航实现。掌握了参数传递、状态管理、导航组件实现等关键技术。这些知识对于开发流畅、易用的HarmonyOS应用至关重要。正确实现导航功能，可以显著提升应用的用户体验。