HarmonyOS Router Parameter Passing in Practice: The Art of Cross-Page Data Transmission

In the development of HarmonyOS applications, route parameter passing is a core technology for communication between pages. A well-designed parameter passing mechanism for routes is crucial for complex applications. During the learning process of HarmonyOS, there are multiple routing methods available. Here are some experiences shared regarding route parameter passing:

I. Router

Core Skills:

Core code example (user detail page jump):

// User List Page (Passing Parameters) import router from '@ohos.router';

@Entry
@Component
struct UserListPage {
const privateUser = { id: 1001, name: '张三', vip: true

build() {
List() {
ListItem() {
Text(this.user.name)
.onClick(() => {
// Jump and pass complex objects router.pushUrl({
url: 'pages/UserDetailPage',
params: {
userData: JSON.stringify(this.user), // Serialize the object source: 'homePage'
}
})
})
}
}
}
}

// User Details Page (Receiving Parameters) @Component
export struct UserDetailPage {
@State userId: number = 0;
@State userName: string = '';
@State isVip: boolean = false;

onPageShow() {
const params = router.getParams(); // Get route parameters try {
if (params) {
const user = JSON.parse(params['userData'] as string); // Deserialization this.userId = user.id;
this.userName = user.name;
this.isVip = user.vip;
console.log(Source page: ${params.source}); }
} catch (error) {
console.error('Parameter parsing error', error); }
}

build() {
Column() {
Text(ID: ${this.userId}).fontSize(18)
Text(Name: ${this.userName}).fontColor(this.isVip ? 'red' : 'black') Color.Red : Color.Black)
// ... }
}
}
Guide to Avoiding Pitfalls:

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

HMRouter is a scene solution for page navigation on HarmonyOS, mainly addressing the issue of mutual navigation between native pages within an application. This article mainly takes various scenarios in actual development as examples to introduce the usage of the HMRouter routing framework. The HMRouter routing framework provides the following functional features:

HMRouter provides page navigation and back functionality based on custom annotations. The usage steps are as follows:

Page redirection

Configure page routes
@HMRouter({ pageUrl: 'profile/Address' })
@Entry
@Component
export struct Address {
...
}
Page Jumping
onClick(()=>{
...
HMRouterMgr.push({pageUrl:'profile/Address',animator:true})
})
Page parameter passing
Passing parameters

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

// -----
})
Receive parameters

@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
...
}
Suggested application scenarios:

Simple application: Directly use HMRouter's annotations + interceptors to quickly achieve decoupled navigation.

Large-scale projects: By adopting TheRouter, the modular collaboration issues are resolved through dynamic routing tables and service injection (ServiceProvider) 84.

By making reasonable use of HMRouter, over 30% of the routing glue code can be reduced, making it particularly suitable for cross-team collaboration in HarmonyOS application projects.