🎉 博客主页:【剑九_六千里-优快云博客】【剑九_六千里-掘金社区】
🎨 上一篇文章:【HarmonyOS第九章:鸿蒙axios(@ohos/axios)】
🎠 系列专栏:【HarmonyOS系列】
💖 感谢大家点赞👍收藏⭐评论✍
文章目录
1. 跳转与后退 API
- router.pushUrl():目标页不会替换当前页,而是压入页面栈。这样可以保留当前页的状态,并且可以通过返回键或者调用
router.back()
方法返回到当前页。 - router.back():方法返回到上一页。
- router.replaceUrl():目标页会替换当前页,并销毁当前页。这样可以释放当前页的资源,并且无法返回到当前页。
1.1 router.pushUrl() 路由跳转
- 路由跳转方法
- 会添加历史记录
- 可返回
1.1.1 基本使用方式
创建一个项目:
选择项目类型:
设置项目基础内容:
在项目中创建一个页面:
查看路由是否已配置:
resources/base/profile/main_pages.json
main_pages.json
必须有页面路径,才能实现页面跳转。- 通过手动方式创建的
ArkTs File
页面文件,需要在main_pages.json
文件中进行手动设置。
页面中使用 router.pushUrl
进行页面跳转:
导入路由:
import router from '@ohos.router';
使用路由:
Button("跳转到User页面").onClick(() => {
// 跳转
// 会加入历史记录,可返回
router.pushUrl({
url: "pages/User"
});
})
完整示例:
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Hello Index';
build() {
Column() {
Text(this.message)
.id('HelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button("跳转到User页面").onClick(() => {
// 跳转
// 会加入历史记录,可返回
router.pushUrl({
url: "pages/User"
});
})
}
.height('100%')
.width('100%')
}
}
注意:
页面堆栈的容纳极限为32个页面。若页面数量超出此限制,可执行 router.clear()
函数以清除历史页面堆栈,进而释放内存。
1.1.2 传递参数
传参(使用 params 传递):
pages/Index.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Hello Index';
build() {
Column() {
Text(this.message)
.id('HelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button("跳转到User页面").onClick(() => {
// 跳转
// 会加入历史记录,可返回
router.pushUrl({
url: "pages/User",
params: {