06. 快速上手！HarmonyOS4.0 路由详解

全栈若城

发布于 2024-04-12 08:36:59

1810

发布于 2024-04-12 08:36:59

文章被收录于专栏：若城技术专栏若城技术专栏

本章内容概要

页面路由

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。

两种模式

Router模块提供了两种跳转模式，分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页是否会替换当前页。

跳转模式	说明
router.pushUrl()	目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页。
router.replaceUrl()	目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

注意：页面栈的最大容量为32个页面。如果超过这个限制，可以调用router.clear()方法清空历史页面栈，释放内存空间。

引入路由模块

import router from '@ohos.router'

router.pushUrl()

跳转到应用内的指定页面。

Row(){
	Text(this.arrList[0]).fontSize(20).lineHeight(40)
		.onClick(()=>{
			router.pushUrl({
				url:'pages/Taget_pushUrl', // 目标url
				params:{
					name:'pushUrl方法'
				}
			})
		})
}.width('100%').height(50)

router.replaceUrl

Row(){
	Text(this.arrList[1]).fontSize(20).lineHeight(40)
		.onClick(()=>{
			router.replaceUrl({
				url:'pages/Taget_pushUrl',
				params:{
					name:'replaceUrl 方法'
				}
			})
		})
}.width('100%').height(50)

创建子页面，接收传值

通过如下方法接收父级传值

 @State name:string = router.getParams()['name']

子页面代码示例：

/**
 * @Author: 若城
 * @Description:
 */
import router from '@ohos.router';
@Entry
	@Component
	struct Taget_pushUrl {
		@State name:string = router.getParams()['name']

		build() {
			Row() {
				Column() {
					Text(`来自父级页面的传值 ${this.name}`).fontSize(20)
					Button('goBack').onClick(()=>{
						router.back()
					})
				}
				.width('100%')
			}
			.height('100%')
		}
	}

父级代码演示

/**
 * @Author: 若城
 * @Description:
 */
import router from '@ohos.router';
@Entry
	@Component

	struct Router_Note {
		private arrList:string[]=['pushUrl 方法', 'replaceUrl 方法']

		build() {
			Row() {
				Column() {
					Row(){
						Text('pushUrl 方法')
							.width('100%')
							.lineHeight(50)
							.padding({left:10})
							.fontSize(30)
							.fontColor('#999')
					}
					Divider().color('#999').strokeWidth(3)

					Row(){
						Text(this.arrList[0]).fontSize(20).lineHeight(40)
							.onClick(()=>{
								router.pushUrl({
									url:'pages/Taget_pushUrl', // 目标url
									params:{
										name:'pushUrl方法'
									}
								})
							})
					}.width('100%').height(50)

					Divider().color('#ccc').strokeWidth(2)

					Row(){
						Text(this.arrList[1]).fontSize(20).lineHeight(40)
							.onClick(()=>{
								router.replaceUrl({
									url:'pages/Taget_pushUrl',
									params:{
										name:'replaceUrl 方法'
									}
								})
							})
					}.width('100%').height(50)
				}
				.width('100%')
					.height('100%')
			}
			.height('100%')
				.width('100%')
		}
	}

获取当前在页面栈内的页面数量

onPageShow(){
	console.log(router.getLength().toString())
}

获取当前页面的状态信息

router.getState()

返回的对象内容字段如下

名称	类型	必填	说明
index	number	是	表示当前页面在页面栈中的索引。从栈底到栈顶，index从1开始递增。
name	string	否	表示当前页面的名称，即对应文件名。
path	string	是	表示当前页面的路径。