ArkUI 页面路由_arkui router

页面路由是指在应用程序中实现不同页面之间的跳转和数据传递。

1. 路由模式

• 页面栈的最大容量上限为32个页面，使用router.clear()方法可以清空页面栈，释放内存。
• Router有两种页面跳转模式，分别是：
  • router.pushUrl()：目标页面不会替换当前页，而是压入页面栈，因此可以使用router.back()返回当前页
  • router.replaceUrl()：目标页替换当前页，当前也会被销毁并释放资源，无法返回当前页。
• Router有两种页面实例模式，分别是：
  • Standard：标准实例模式，每次跳转都会新建一个目标页并压入栈顶，默认就是这种模式。
  • Single：单实例模式，如果目标页已经在栈中，则离栈顶最近的同url页面会被移动到栈顶并重新加载。

2. 使用路由

1.导入HarmonyOS提供的Router模块：

import router from '@ohos.router'
1

2.使用router的api实现跳转、返回等操作：

// 跳转到指定路径，并传递参数
router.pushUrl(
  {
    url: 'pages/ImagePage',
    params: {id: 1}
  },
  router.RouterMode.Single,
  err => {   // 异常响应回调函数
    if(err) {
      console.log(`路由失败, errCode: ${err.code}, errMsg: ${err.message}`)
    }
  }
)
1
2
3
4
5
6
7
8
9
10
11
12
13

• 参数1： RouterOptions
  • url：目标页面路径
  • params：参数（可选）
• 参数2：页面模式，RouterMode枚举
• 参数3：异常响应回调函数，错误码：
  • 100001：内部错误，可能是渲染失败
  • 100002：路由地址错误
  • 100003：路由栈中页面超过32

3.目标页面获取参数：

// 获取传递过来的参数，使用any类型接收
params: any = router.getParams()
// 获取某一个具体的参数
let courseName = router.getParams()['courseName'] as string

// 返回上一页
router.back()

// 返回到指定页面，并携带参数
router.back(
  {
    url: 'pages/Index',
    params: {id: 10}
  }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

页面路径需要在resources.base.profile.main_pages.json中进行配置。

{
  "src": [
    "pages/Index",
    "pages/ImagePage"
  ]
}
1
2
3
4
5
6

3. 路由应用

3.1 在页面跳转前弹出alert提示

// 返回前的警告提示，点取消则不返回
router.showAlertBeforeBackPage({
  message: '确定要返回吗？'
})

// 返回页面
router.back()
1
2
3
4
5
6
7