1, 准备两个页面
1. pages/DetailPage.ets
2. pages/Index.ets
2, 代码直接 cv 页面 // pages/Index.ets
import router from '@ohos.router'
// 参数类型
class User {
name: string
age: number
}
@Entry
@Component
struct Index {
// 要传的参数
@State
user: 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 {
// 第一中方法接收参数
@State
title: 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)
}
}