【Harmony OS 4.0】页面路由跳转代码示例

在这里插入图片描述

ets/pages/Index.ets

import router from '@ohos.router';@Entry
@Component
struct Index {@State title: string = 'Index Page';@State message: string = ''onPageShow(): void { // 页面每次显示时触发。使用aboutToAppear页面没反应。let record = router.getParams() as Record<string, string>if (record) {this.message = record['backMsg']}}build() {Row() {Column() {Text(this.title).id('IndexPage').fontSize(50).fontWeight(FontWeight.Bold)// .alignRules({//   center: { anchor: '__container__', align: VerticalAlign.Center },//   middle: { anchor: '__container__', align: HorizontalAlign.Center }// })Text(this.message).fontSize(20).opacity(.6)Blank()Button('Next').width(260).height(45).fontSize(20).onClick(() => {router.pushUrl({ url: 'pages/SecondPage', params: { sendMsg: 'Index页面传来的数据' } })})}.width('100%').height(160)}.height('100%').width('100%')}
}

ets/pages/SecondPage

import router from '@ohos.router';@Entry
@Component
struct SecondPage {@State title: string = 'Second Page';@State message: string = (router.getParams() as Record<string, string>)['sendMsg']build() {Row() {Column() {Text(this.title).id('SecondPage').fontSize(50).fontWeight(FontWeight.Bold)// .alignRules({//   center: { anchor: '__container__', align: VerticalAlign.Center },//   middle: { anchor: '__container__', align: HorizontalAlign.Center }// })Text(this.message).fontSize(20).opacity(.6)Blank()Button('Back').width(260).height(45).fontSize(20).onClick(() => {router.showAlertBeforeBackPage({ message: '确定要返回界面吗？' })router.back({url: 'pages/Index',params: {backMsg: 'Second页面传来的数据'}})})}.width('100%').height(160)}.height('100%').width('100%')}
}