【HarmonyOS实战开发】路由跳转传递参数

最新推荐文章于 2024-08-18 20:19:13 发布

秃头的世界

最新推荐文章于 2024-08-18 20:19:13 发布

阅读量508

点赞数 11

分类专栏：安卓前端鸿蒙文章标签： harmonyos 华为鸿蒙前端安卓

本文链接：https://blog.csdn.net/m0_72720965/article/details/141270932

版权

安卓同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

前端

31 篇文章 0 订阅

订阅专栏

鸿蒙

31 篇文章 0 订阅

订阅专栏

目标：

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

先准备数model的工具类：

DataModels.ets
代码如下：

 export  class DataModelInfo {
  age: number = 0;
}
 export  class DataModel {
   id: number = 0;
   info: DataModelInfo|null = null;
 }

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

页面一

简单起见，第一个页面我们只放一个按钮，给这个按钮添加一个点击事件，点击这个按钮，跳转到下一个页面，并且把数据带过去。页面如下图：


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.import { DataModelInfo,DataModel } from ‘./DataModels’
在Page1中导入数据modelDataModelInfo,DataModel，便于在page1中使用
2.跳转的时候，params接收一个数据对象

页面二

这个页面放一个按钮和一个Text，点击这个按钮，获取上个页面传过来的数据，并且显示在Text上，如图

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


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)
  }
}

注意：const params: DataModel = router.getParams() as DataModel;
这一行是关键的，只有将router接收的params 转换成一个数据对象后，才可以方便的进行其他操作。