#HarmonyOS NEXT 体验官# 鸿蒙开发之--路由跳转传递参数原创

wx6192ef9117955

发布于 2024-8-6 19:16

浏览

0收藏

作者：江南

前言：

今天有同学在询问关于鸿蒙开发学习中路由跳转携带参数的问题，为了更好的讲解，也便于将来别的同学学习，我们写一篇关于鸿蒙路由跳转的文章。

目标：

从页面一跳转到页面二，并且将路由携带的参数传递过去。

先准备数model的工具类：

DataModels.ets
代码如下：

 export  class DataModelInfo {
  age: number = 0;
}
 export  class DataModel {
   id: number = 0;
   info: DataModelInfo|null = null;
 }
1.
2.
3.
4.
5.
6.
7.

注意：一定要写export表示该类可以导出，别的页面才可以导入使用。

页面一

简单起见，第一个页面我们只放一个按钮，给这个按钮添加一个点击事件，点击这个按钮，跳转到下一个页面，并且把数据带过去。页面如下图：
#HarmonyOS NEXT 体验官# 鸿蒙开发之--路由跳转传递参数-鸿蒙开发者社区


import { router } from '@kit.ArkUI';
import { DataModelInfo,DataModel } from './DataModels'
@Entry
@Component
struct Page1 {
  build() {
    Column() {
      Button('Page1测试').onClick(()=>{
        this.onJumpClick()
      })
    }.alignItems(HorizontalAlign.Start)
    .height('100%')
    .width('100%')
    .backgroundColor(Color.White)
  }

  onJumpClick() {
    let paramsInfo: DataModel = {
      id: 123456,
      info: {
        age: 18
      }
    };

    router.pushUrl({
      url: 'pages/routertest/Page2',
      params: paramsInfo 
    }, (err) => {
      if (err) {
        console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
        return;
      }
      console.info('Invoke pushUrl succeeded.');
    })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

注意：1.import { DataModelInfo,DataModel } from ‘./DataModels’
在Page1中导入数据modelDataModelInfo,DataModel，便于在page1中使用
2.跳转的时候，params接收一个数据对象

页面二

这个页面放一个按钮和一个Text，点击这个按钮，获取上个页面传过来的数据，并且显示在Text上，如图
#HarmonyOS NEXT 体验官# 鸿蒙开发之--路由跳转传递参数-鸿蒙开发者社区

点击这个按钮后的效果如下图

#HarmonyOS NEXT 体验官# 鸿蒙开发之--路由跳转传递参数-鸿蒙开发者社区


import { router } from '@kit.ArkUI';
import { DataModel } from './DataModels'

@Entry
@Component
struct Page2 {
  @State message: string = 'Hello World';
  build() {
    Column() {
      Button('Page2测试').onClick(()=>{
        const params: DataModel = router.getParams() as DataModel; 
        this.message = JSON.stringify(params)
      })
      Text('Page1传过来的值：'+this.message)
    }.alignItems(HorizontalAlign.Start)
    .height('100%')
    .width('100%')
    .backgroundColor(Color.White)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.