华为鸿蒙使用router跳转页面和 router.getParams接收参数并使用参数 [最简单最直接的详细教程 ]

1, 准备两个页面

1. pages/DetailPage.ets

2. pages/Index.ets

2, 代码直接 cv 页面 // pages/Index.ets

import router from '@ohos.router'// 参数类型
class User {name: stringage: number
}@Entry
@Component
struct Index {// 要传的参数@Stateuser: User = {name: 'John',age: 30}build() {Column({space:15}){Text('index page').fontSize('40')Button('jump to detail page').onClick(()=>{//   1. 跳转页面router.pushUrl({url:'pages/DetailPage',params: this.user // 传参})//   2. 跳转  替换页面//      router.replaceUrl({ url:'pages/DetailPage'})})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

3, 直接 cv 代码 pages/DetailPage.ets

import router from '@ohos.router'
import promptAction from '@ohos.promptAction'@Entry
@Component
struct DetailPage {// 第一中方法接收参数@Statetitle: string = router.getParams()?.['name']// 第二种方法接收参数aboutToAppear(){const  params = router.getParams()// 打印参数 params 打印出来是一个对象console.log('11111',params)promptAction.showToast({ message: params['name'] + params['age'] })}build() {Column({space:15}){Text('Detail page').fontSize(40)// 使用参数Text(this.title)Button('back').onClick(()=>{//   1. 跳到上一个页面router.back()})}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}