鸿蒙路由传参实战：跨页面数据传递的艺术

用户27403876295
236 阅读3分钟

​

在鸿蒙应用开发中，路由传参是实现页面间通信的核心技术。路由合理设计传参机制对复杂应用的十分重要。在鸿蒙学习过程中，有多种路由方式可以使用，下面是有关路由传参的经验分享：

一、router

核心技巧：

  1. 参数类型处理：支持string | number | boolean | object类型传递，对象需用JSON.stringify序列化
  2. 参数安全获取：在目标页面的onPageShow生命周期获取参数，避免页面未初始化时访问
  3. 参数校验：使用try-catch处理非法参数格式
  4. URL管理：通过pages.json统一管理路由路径，避免硬编码

核心代码示例（用户详情页跳转）：

// 用户列表页 (传递参数)
import router from '@ohos.router';

@Entry
@Component
struct UserListPage {
  private user = { id: 1001, name: '张三', vip: true };

  build() {
    List() {
      ListItem() {
        Text(this.user.name)
          .onClick(() => {
            // 跳转并传递复杂对象
            router.pushUrl({
              url: 'pages/UserDetailPage',
              params: { 
                userData: JSON.stringify(this.user),  // 对象序列化
                source: 'homePage' 
              }
            })
          })
      }
    }
  }
}

// 用户详情页 (接收参数)
@Component
export struct UserDetailPage {
  @State userId: number = 0;
  @State userName: string = '';
  @State isVip: boolean = false;

  onPageShow() {
    const params = router.getParams();  // 获取路由参数
    try {
      if (params) {
        const user = JSON.parse(params['userData'] as string);  // 反序列化
        this.userId = user.id;
        this.userName = user.name;
        this.isVip = user.vip;
        console.log(`来源页面: ${params.source}`);
      }
    } catch (error) {
      console.error('参数解析错误', error);
    }
  }

  build() {
    Column() {
      Text(`ID: ${this.userId}`).fontSize(18)
      Text(`姓名: ${this.userName}`).fontColor(this.isVip ? Color.Red : Color.Black)
      // ...
    }
  }
}

避坑指南：

  1. 大数据传递：超过1MB数据建议使用公共状态管理（如AppStorage）替代路由传参

  2. 敏感信息：切勿通过URL传递密码等敏感数据

  3. 页面回传：使用router.back()返回时可携带结果参数：

    router.back({ 
  url: 'pages/UserListPage',
  params: { updated: true }
})

  4. 动态路由：支持路径参数pages/UserDetailPage/:id，通过router.getParams()['id']获取

二、HMRouter

  HMRouter是HarmonyOS上页面跳转的场景解决方案，主要解决应用内原生页面间相互跳转的问题。本文主要以实际开发中的各项场景为例，介绍HMRouter路由框架的使用。HMRouter路由框架提供了下列功能特性：

使用自定义注解实现路由跳转。
支持HAR/HSP。
支持路由拦截、路由生命周期。
简化自定义动画配置：配置全局动画，单独指定某个页面的切换动画。
支持不同的页面类型：单例页面、Dialog页面。
该框架底层对Navigation相关能力进行了封装，帮助开发者减少对Navigation相关细节内容的关注、提高开发效率，同时该框架对页面跳转能力进行了增强，例如其中的路由拦截、单例页面等。
页面跳转：

HMRouter提供了基于自定义注解的页面跳转与返回功能，使用步骤如下：

页面跳转

1.配置页面路由

@HMRouter({ pageUrl: 'profile/Address' })
@Entry
@Component
export struct Address {
...
}

2.页面跳转

onClick(()=>{
...
 HMRouterMgr.push({pageUrl:'profile/Address',animator:true})
})

页面传参

传递参数

.onClick(() => {
          HMRouterMgr.push({pageUrl:'goods/Detail',param:item})
          
          // -----
        })

接收参数

@HMRouter({pageUrl:'goods/Detail'})
@ComponentV2
export struct GoodsDetail {
  @Local item:HMPageParam=HMRouterMgr.getCurrentParam(HMParamType.all) as HMPageParam
  @Provider() goods:GoodsItemType=this.item.data as GoodsItemType
...
}

适用场景建议

  • 简单应用：直接使用 HMRouter 的注解+拦截器，快速实现解耦跳转。
  • 大型项目：采用 TheRouter，通过 动态路由表 和 服务注入（ServiceProvider）解决模块化协同问题84。

通过合理使用 HMRouter，可减少 30%+ 的路由胶水代码，尤其适合跨团队协作的鸿蒙应用项目。

​

avatar
文章
阅读
粉丝