@toc

路由传参

在鸿蒙应用开发中，router 是 页面跳转最基础、最简单的方式，它允许开发者在不同的 ArkUI 页面 之间进行导航，并支持参数传递、返回、页面栈管理等功能。

新建页面

步骤一：/src/main/ets/pages/文件中创建文件

步骤二：起名字，点击Finish

查看路由：路由信息统一记录在 /src/main/resources/base/profile/main_pages.json 文件中

Index.ets进行传参,params传递对象数据。

import { router } from '@kit.ArkUI'; //引用router的功能模块

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State params:string='传递'  //传递的参数
  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => { //点击事件
          this.message = 'Welcome';
          router.pushUrl({url:"pages/routerParams",params:{title:'1'}}) //路由跳转并传参
        })
    }
    .height('100%')
    .width('100%')
  }
}

routerParams.ets 定义接口，确定类型，接受参数

import { router } from '@kit.ArkUI';
interface paramType{  //定义了一个接口来接受参数
  title:string;
}
@Entry
@Component
struct RouterParams {
  @State message: string = 'Hello World';
  onPageShow(): void {
  let  res=router.getParams() as paramType  //接受参数
    console.log(res.title); //查看参数
  }

  build() {
    Column(){
    }
    .height('100%')
    .width('100%')
  }
}

查看结果

打开Index.ets文件，然后点击右侧的预览器，等待加载出来。触发点击功能，查看日志