HarmonyOS提供了Router模块,通过不同的url地址,可以方便地进行页面路由
1. 页面跳转
页面栈的最大容量为32个页面。如果超过这个限制,可以调用router.clear()方法清空历史页面栈,释放内存空间。
1.1 pushUrl
目标页不会替换当前页,而是压入页面栈。这样可以保留当前页的状态,并且可以通过返回键或者调用router.back()方法返回到当前页。
Index.ets
import router from '@ohos.router'
@Entry
@Component
struct Index {
build() {
Column() {
Text('首页')
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('pushUrl 跳转 DetailPage')
.fontColor(Color.White)
}
.width(200)
.height(50)
.margin({ bottom: 20 })
.onClick(() => {
router.pushUrl({ url: 'pages/DetailPage' })
})
}
.width("100%")
.height("100%")
}
}
创建页面 DetailPage.ets
@Entry
@Component
struct DetailPage {
@State message: string = 'DetailPage'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
1.2 replaceUrl
目标页会替换当前页,并销毁当前页。这样可以释放当前页的资源,并且无法返回到当前页。
修改 Index.ets
import router from '@ohos.router'
@Entry
@Component
struct Index {
build() {
Column() {
Text('首页')
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('pushUrl 跳转 DetailPage')
.fontColor(Color.White)
}
.width(200)
.height(50)
.margin({ bottom: 20 })
.onClick(() => {
router.pushUrl({ url: 'pages/DetailPage' })
})
Button() {
Text('replaceUrl 跳转 DetailPage')
.fontColor(Color.White)
}
.width(200)
.height(50)
.margin({ bottom: 20 })
.onClick(() => {
router.replaceUrl({ url: 'pages/DetailPage' })
})
}
.width("100%")
.height("100%")
}
}
2. 页面返回
当用户在一个页面完成操作后,通常需要返回到上一个页面或者指定页面,这就需要用到页面返回功能。在返回的过程中,可能需要将数据传递给目标页,这就需要用到数据传递功能。
修改 DetailPage.ets
import router from '@ohos.router'
@Entry
@Component
struct DetailPage {
@State message: string = 'DetailPage'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('返回')
.fontColor(Color.White)
}
.width(200)
.height(50)
.margin({ bottom: 20 })
.onClick(() => {
// 返回到上一个页面
router.back()
// 返回到指定页面
// router.back({
// url: 'pages/Index'
// })
})
}
.width('100%')
}
.height('100%')
}
}
3. 传递参数
修改 Index.ets
import router from '@ohos.router'
@Entry
@Component
struct Index {
build() {
Column() {
Text('首页')
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('pushUrl 跳转 DetailPage')
.fontColor(Color.White)
}
.width(200)
.height(50)
.margin({ bottom: 20 })
.onClick(() => {
router.pushUrl({
url: 'pages/DetailPage',
params: {
name: "lili",
age: 18
}
})
})
Button() {
Text('replaceUrl 跳转 DetailPage')
.fontColor(Color.White)
}
.width(200)
.height(50)
.margin({ bottom: 20 })
.onClick(() => {
router.replaceUrl({ url: 'pages/DetailPage' })
})
}
.width("100%")
.height("100%")
}
}
修改 DetailPage.ets
import router from '@ohos.router'
class RouterParams {
name: string
age: number
}
@Entry
@Component
struct DetailPage {
@State message: string = 'DetailPage'
aboutToAppear() {
const params = router.getParams() as RouterParams;
if (params?.name) {
this.message = "Hello " + params.name;
}
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('返回')
.fontColor(Color.White)
}
.width(200)
.height(50)
.margin({ bottom: 20 })
.onClick(() => {
// 返回到上一个页面
router.back()
// 返回到指定页面
// router.back({
// url: 'pages/Index'
// })
})
}
.width('100%')
}
.height('100%')
}
}
4. 路由的模式
Router模块提供了两种实例模式,分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。
Standard
标准实例模式,也是默认情况下的实例模式。每次调用该方法都会新建一个目标页,并压入栈顶。
Single
单实例模式。即如果目标页的url在页面栈中已经存在同url页面,则离栈顶最近的同url页面会被移动到栈顶,并重新加载;如果目标页的url在页面栈中不存在同url页面,则按照标准模式跳转。