零基础开始学习鸿蒙开发-继页面跳转后，页面参数的传递与接收。_鸿蒙参数传入其他界面

目录

1.首先，我们简单的创建两个页面，即ToParamPage和AccetParamPage。使用方舟编译器可以快速的创建页面，如下图所示,选中Page选项，即可轻松创建Page页面。

2.页面的路由传参主要是通过router.pushUrl方法实现，pushUrl方法有两个参数，一个是url,另一个是params，第一个是要跳转页面的路径(这个路径必须在main_pages.json里面配置才能使用)，另外一个就是我们传递的参数了,params是复数，即可以传多个参数。

3.参数的接收，也是通过router来接收的，通过router.getParams()?.['参数']方法来接收传过来的参数。

4.下面是两个页面的完整代码.

5.下面是最终代码运行效果。

1.首先，我们简单的创建两个页面，即ToParamPage和AccetParamPage。使用方舟编译器可以快速的创建页面，如下图所示,选中Page选项，即可轻松创建Page页面。

2.页面的路由传参主要是通过router.pushUrl方法实现，pushUrl方法有两个参数，一个是url,另一个是params，第一个是要跳转页面的路径(这个路径必须在main_pages.json里面配置才能使用)，另外一个就是我们传递的参数了,params是复数，即可以传多个参数。

代码示例: 
router.pushUrl({url:'pages/AccetParamPage',params:{
              list:this.list,
              title:this.title
            }})

3.参数的接收，也是通过router来接收的，通过router.getParams()?.['参数']方法来接收传过来的参数。

@State title:string = router.getParams()?.['title'];

4.下面是两个页面的完整代码.

ToParamPage.ets代码示例:
 
import router from '@ohos.router';
@Entry
@Component
struct ToParamPage {
  @State list:string[] =['西瓜','哈密瓜','葡萄'];
  @State title:string ='水果类';
  build() {
    Row() {
      Column() {
        Button('传参').width("50%").height("100")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            router.pushUrl({url:'pages/AccetParamPage',params:{
              list:this.list,
              title:this.title
            }})
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}
 
 
AccetParamPag代码示例:
import router from '@ohos.router';
@Entry
@Component
struct AccetParamPage {
  @State list:string[] = router.getParams()?.['list'];
  @State title:string = router.getParams()?.['title'];
  @Builder itemHeaer(title:string){
    Span(title).fontColor(Color.Green).fontWeight(FontWeight.Bold).fontSize(20)
  }
  build() {
    Row() {
      Column() {
        List(){
          ForEach(this.list,item=>{
            ListItemGroup({header:this.itemHeaer(this.title)}){
              ListItem(){
                Text(item).fontColor(Color.Red).fontSize(16).fontWeight(FontWeight.Normal)
              }
            }
          },item=>item)
        }
      }.margin({left:150,right:150})
      .alignItems(HorizontalAlign.Center)
      .padding("10")
      .width('100%')
    }
    .height('100%')
  }
}
 
 

5.下面是最终代码运行效果。