注:本文章只是简单概述基本使用,详情请看文档文档中心, 另:官方更推荐Navigation进行跳转。
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址,可以方便地进行页面路由,轻松地访问不同的页面。
Router适用于模块间与模块内页面切换,通过每个页面的url实现模块间解耦。模块内页面跳转时,为了实现更好的转场动效场景不建议使用该模块,推荐使用Navigation。
1. router.pushUrl
压栈跳转:跳转到应用内的指定页面。页面栈对多是32。
参数1:object:1: url:必填。表示目标页面的url,可以用以下两种格式:- 页面绝对路径,由配置文件中pages列表提供,例如:- pages/index/index- pages/detail/detail- 特殊值,如果url的值是"/",则跳转到首页。2:params:选填。表示路由跳转时要同时传递到目标页面的数据,切换到其他页面时,当前接收的数据失效。跳转到目标页面后,使用router.getParams()获取传递的参数,此外,在类web范式中,参数也可以在页面中直接使用。注:params参数不能传递方法和系统接口返回的对象
参数2: 选填:设置为单实例模式还是多实例模式,默认为多实例。Standard:多实例模式,也是默认情况下的跳转模式。目标页面会被添加到页面栈顶,无论栈中是否存在相同url的页面。Single:单实例模式。如果目标页面的url已经存在于页面栈中,则该url页面移动到栈顶。如果目标页面的url在页面栈中不存在同url页面,则按照默认的多实例模式进行跳转。
2.router.getLength
获取当前在页面栈内的页面数量。
// -----页面1----------
import { promptAction, router } from '@kit.ArkUI'
@Entry
@Component
struct RouterPage1 {
@State message: string = ''
aboutToAppear(): void {
this.message = JSON.stringify(router.getParams()) || '参数显示位置'
promptAction.showToast({
message: router.getLength()
})
}
build() {
Column() {
Text('参数:' + this.message)
Text('页面1')
Button('压栈跳转--最多32层')
.onClick(() => {
router.pushUrl({
url: 'pages/12/RouterPage2'
})
})
}
.height('100%')
.width('100%')
}
}
// -----页面2----------
import { promptAction, router } from '@kit.ArkUI';
@Entry
@Component
struct RouterPage2 {
@State message: string = 'Hello Router';
aboutToAppear(): void {
promptAction.showToast({
message: router.getLength()
})
}
build() {
Column() {
Text('页面2')
Button('压栈跳转--最多32层')
.onClick(() => {
router.pushUrl({
url: 'pages/12/RouterPage1'
})
})
Button('压栈跳转--单实例跳转')
.onClick(() => {
router.pushUrl({
url: 'pages/12/RouterPage1',
}, router.RouterMode.Single)
})
Button('压栈跳转--带参数')
.onClick(() => {
router.pushUrl({
url: 'pages/12/RouterPage1',
params: {
message: this.message
}
})
})
}
.height('100%')
.width('100%')
}
}
3. router.replaceUrl
用应用内的某个页面替换当前页面,并销毁被替换的页面。参数同pushUrl参数相同(销毁当前页面栈页面,替换成新的跳转页面)
Button('替换跳转--替换当前页面栈').onClick(() => {
router.replaceUrl({
url: 'pages/12/RouterPage2',
params: {
message: 'hello, ReplaceUrl'
}
})
})
4. router.clear
清空页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。
router.clear();
5. router.back
返回上一页面或指定的页面。参数可选,同pushUrl参数相同。
Button('back 返回页面,无参数').onClick(() => {
router.back();
})
Button('back 返回页面,有参数').onClick(() => {
router.back({
url: 'pages/12/RouterPage1',
params: {
message: this.message
}
});
})
6. router.getState
获取当前页面的状态信息。
Button('getState--获取当前页面的状态信息。').onClick(() => {
promptAction.showDialog({
message: JSON.stringify(router.getState())
})
})
7. router.showAlertBeforeBackPage
开启页面返回询问对话框。(就是给个提示,没什么用)
aboutToAppear(): void {
router.showAlertBeforeBackPage({
message: '确定退出吗?'
})
}
8.跳转到共享包Har或者Hsp中的页面
8.1: router.pushUrl跳转
Button('跳转hsp页面').onClick(() => {
router.pushUrl({
url: '@bundle:com.example.myapplication/library/ets/pages/Index'
})
})
8.2 router.pushNamedRoute跳转
1. 在想要跳转到的共享包Har或者Hsp页面里,给@Entry修饰的自定义组件命名,并将该页面导出
2. 在当前应用包的oh-package.json5文件中配置依赖包
3.在跳转的页面中引入命名路由的页面:
4. 使用router.pushNamedRoute进行跳转,pushNamedRoute同pushUrl一样,也可以传递携带参数到对应页面,在对应页面使用router.getParams()获取参数。