由于这时候我页面跳转路由想要传递参数然后在新的页面中渲染
页面的配置,找到main_page.json找到以下的路由配置
配置需要的路由,这里以pages/routePage和pages/RouteText为例
以下是页面实现
点击之后跳转到新的页面(如下图)
想要传递的参数就是这个name和age,这里直接上代码
import { router } from '@kit.ArkUI';
interface person{
name:string,
age:string
}
@Entry
@Component
struct RouteText {
@State message: string = 'Hello World';
zjw:person={
"name":"张三",
"age":"18"
}
build() {
Column(){
Button('路由跳转传参')
.onClick(()=>{
console.log("123")
router.pushUrl({
"url":'pages/routePage',
"params":this.zjw
})
})
}
.height('100%')
.width('100%')
}
}
import router from '@ohos.router';
@Entry
@Component
struct RoutePage {
@State message: string = 'Hello World';
@State name1:string = ""
@State age1:string = ""
// 获取参数
aboutToAppear(): void {
const params = router.getParams() as Record<string, string>;
const name:string = params['name'];
this.name1=name
const age:string = params['age'];
this.age1 =age
console.log(`Received parameters: id = ${name}, age = ${age}`);
}
build() {
Column() {
Text(this.message)
.fontSize(40)
.textAlign(TextAlign.Center)
.height(60)
.width('100%');
Text(`Name: ${this.name1}`)
.fontSize(30)
.textAlign(TextAlign.Center)
.height(60)
.width('100%');
Text(`Age: ${this.age1}`)
.fontSize(30)
.textAlign(TextAlign.Center)
.height(60)
.width('100%');
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
这里需要注意的是:需要给这个getParams() 加上Record,并且添加对应的类型才可以使用如果传递是的数字就把string改成number,但是这里两者必须统一,否则会报错