作者：江南

前言：

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

目标：

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

先准备数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 转换成一个数据对象后，才可以方便的进行其他操作。

结束语

今天我们先分享到这里，欢迎童鞋们评论留言，感谢观看。