鸿蒙：实现两个Page页面跳转

效果展示

这篇博文在《鸿蒙：从0到“Hello Harmony”》基础上实现两个Page页面跳转

1.构建第一个页面

第一个页面就是“Hello Harmony”，把文件名和显示内容都改一下，改成“FirstPage”，再添加一个“Next”按钮。

@Entry
@Component
struct FristPage {@State message1: string = "FirstPage"@State message2: string = 'Next'build() {Row() {Column() {Text(this.message1).fontSize(30).fontWeight(FontWeight.Bold).height("10%").margin({top: 0})Button(this.message2).fontSize(30).fontWeight(FontWeight.Bold).height('5%').type(ButtonType.Capsule).margin({top: 30}).backgroundColor("#0D9FFB").width('50%').height('5%')}.width('100%')}.height('100%')}
}

在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：

2.构建第二个页面

1.在“entry > src > main > ets > pages”目录下，新建SecondPage.ets

同样，实现一个文本和一个Button按钮

@Entry
@Component
struct SecondPage {@State message1: string = 'SecondPage'@State message2: string = 'Back'build() {Row() {Column() {Text(this.message1).fontSize(30).fontWeight(FontWeight.Bold)Button(this.message2).fontSize(30).fontWeight(FontWeight.Bold).height('5%').type(ButtonType.Capsule).margin({top: 30}).backgroundColor("#0D9FFB").width('50%').height('5%')}.width('100%')}.height('100%')}
}

Previewer效果：

3.配置路由

配置第二个页面的路由。

在“Project”窗口，打开“entry > src > main > resources > base > profile”，

在main_pages.json文件中的“src”下配置第二个页面的路由“pages/second”。

代码如下：

{"src": ["pages/FirstPage","pages/SecondPage"]
}

4.实现页面跳转

​页面间的导航可以通过页面路由router来实现。

页面路由router根据页面url找到目标页面，从而实现跳转。

使用页面路由需要导入router模块。

(1).第一个页面跳转到第二个页面

在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。

“FirstPage.ets”文件的代码如下：

// @ohos.router模块功能从API version 8开始支持，请使用对应匹配的SDK
import router from '@ohos.router';@Entry
@Component
struct FristPage {@State message1: string = "FirstPage"@State message2: string = 'Next'build() {Row() {Column() {Text(this.message1).fontSize(30).fontWeight(FontWeight.Bold).height("10%").margin({top: 0})Button(this.message2).fontSize(30).fontWeight(FontWeight.Bold).height('5%').type(ButtonType.Capsule).margin({top: 30}).backgroundColor("#0D9FFB").width('50%').height('5%').onClick(() => {console.info(`Succeeded in clicking the 'Next' button.`)try {router.pushUrl({ url: 'pages/SecondPage' })console.info('Succeeded in jumping to the second page.')} catch (err) {console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)}})}.width('100%')}.height('100%')}
}

(1).第二个页面跳转到第一个页面

在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。

“SecondPage.ets”文件的示例如下：

import router from '@ohos.router';@Entry
@Component
struct SecondPage {@State message1: string = 'SecondPage'@State message2: string = 'Back'build() {Row() {Column() {Text(this.message1).fontSize(30).fontWeight(FontWeight.Bold)Button(this.message2).fontSize(30).fontWeight(FontWeight.Bold).height('5%').type(ButtonType.Capsule).margin({top: 30}).backgroundColor("#0D9FFB").width('50%').height('5%').onClick(() => {console.info(`Succeeded in clicking the 'Next' button.`)try {router.pushUrl({ url: 'pages/FirstPage' })console.info('Succeeded in jumping to the second page.')} catch (err) {console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)}})}.width('100%')}.height('100%')}
}

5.实现效果

如开头展示