前言
一道刺眼的光芒过后，我猛地睁开眼睛，却发现自己正蜷缩在一张陌生的床底下。四周弥漫着一股令人窒息的霉味，仿佛被遗忘已久。这是怎么回事？我明明记得自己已经死了，为什么会重生在这里？
我努力回忆着上一世的一切，那些失去的亲人、朋友和梦想如潮水般涌上心头。不，我不能就这样屈服于命运！这一世，我要把我失去的一切都夺回来！
然而，眼前这个地狱般的开局让我倍感绝望。我必须想办法离开这里，找到一个安全的地方重新开始。突然，我脑海中灵光一闪，想起了上一世学过的HarmonyOS知识。如果我能够利用Ability内页面跳转功能，或许就能逃出生天。
一、新建Ability内页面
- 初始化一个工程后，会生成以下内容：
-
在src/main/ets/entryability目录下，初识会生成一个Ability文件EntryAbility.ts。可以EntryAbility.ts文件中根据业务需要实现Ability的生命周期回调函数
-
在src/main/ets/pages目录下，会生成一个Index界面。这也是基于Ability实现的应用入口页面。可以砸Index页面中根据业务需要实现入口页面的功能
- 为了实现页面的跳转和数据传递，需要新建一个页面。在src/main/ets/pages目录下，可以通过New->Page来新建页面
在原有Index页面的基础上，新建一个名为Second的页面
Second页面创建完成后，会进行两个动作。
第一个动作是在src/main/ets/pages目录下创建一个Second.ets文件。文件内容为
@Entry
@Component
struct Second {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
另一个动作是将Second页面信息配置到src/main/resources/base/profile/main_pages.json文件中文件内容为
{
"src": [
"pages/Index",
"pages/Second"
]
}
我们可以分别将Index.ets和Second.ets的message的变量值改为Index界面和Second界面用来区分和传递。
二、页面跳转和传参
页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面URL找到目标也页面，从而实现跳转。
使用页面路由之前，需要先导入router模块，代码如下：
import router from '@ohos.router';
- router.push()
通过调用router.push()方法，体哦啊转到Ability指定页面，每调用一次，均会新增一个页面。默认情况下页面栈数量会加1，页面栈支持最大页面数量是32
使用方法如下：
router.push({
url:"pages/Second",
params:{
src:'Index页面传来的数据',
}
}
})
注意：
当页面栈数量较大或者超过32时，了一使用router.clear()方法清楚页面栈的所有历史界面，仅保留当前页作为栈顶页面
- router.replace()
通过使用router.replace()方法，跳转到Ability内的指定页面。既使用新的页面替换当前页面，并销毁被替换的当前页面，页面栈数量保持不变。
使用方法如下：
router.replace({
url:"pages/Second",
params:{
src:'Index页面传来的数据',
}
}
})
-
给router.push()方法和router.replace()方法加mode参数
router.push()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard标准模式。
说明：
在单实例模式下，如果要添加的目标页面已经在页面栈中有了相同的URL，那么离栈顶最近的URL页面就会 被移动到栈顶，移动后的页面为新建页，原来的页面仍然保存在栈中，页面数量不变。如果目标页面在页面栈 中不存在相同的URL的页面，那么按照标准模式跳转，页面数量会加1.
使用方法如下：
router.push({
url:"pages/Second",
params:{
src:'Index页面传来的数据',
}
}
},router.RouterMode.Single)
最后，在Index.ets文件中添加按钮触发跳转，Index.ets代码如下：
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Index页面'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
//添加按钮，触发跳转
Button('跳转到第二个页面')
.fontSize(40)
.onClick(()=>{
router.push({
url:'pages/Second',
params:{//给要跳转的页面传参数
src:'Index页面传来的数据'//传的参数
}
})
})
}
.width('100%')
}
.height('100%')
}
}
三、参数接受
通过调用router.getParams:()方法获取Index页面传递过来的自定义参数。
import router from ‘@ohos.router’;
@Entry
@Component
struct Second {
@State src: string = router.getParams()?.['src']//页面刷新展示
...
}
可以通过调用router.back()方法返回上一个页面。
最终，完整的Second.ets代码如下：
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State message: string = 'Second页面'
@State src: string = router.getParams()?.['src']//页面刷新展示
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
//显示传参内容
Text(this.src)
.fontSize(30)
//添加按钮，触发返回
Button('返回')
.fontSize(40)
.onClick(() => {
router.back();
})
}
.width('100%')
}
.height('100%')
}
}
效果展示
