Harmony OS Next应用“丁斗口算”开发记录 (4) 原创

丁斗科技
发布于 2025-1-15 16:54
浏览
0收藏

第四节 页面路由

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址,可以方便地进行页面路由,轻松地访问不同的页面。

页面跳转
页面跳转是开发过程中的一个重要组成部分。在使用应用程序时,通常需要在不同的页面之间跳转,有时还需要将数据从一个页面传递到另一个页面。

以本APP为例,需要从首页跳转到题目页面。在首页中点击不同的菜单时,跳转到同一个题目页面,同时传递用户点击的菜单信息。在题目页面获取到信息后,生成不同类型的题目。
首页
Harmony OS Next应用“丁斗口算”开发记录 (4) -鸿蒙开发者社区
题目页
Harmony OS Next应用“丁斗口算”开发记录 (4) -鸿蒙开发者社区
Router模块提供了两种跳转模式,分别是router.pushUrl和router.replaceUrl。这两种模式决定了目标页面是否会替换当前页。

router.pushUrl:目标页面不会替换当前页,而是压入页面栈。这样可以保留当前页的状态,并且可以通过返回键或者调用router.back方法返回到当前页。

router.replaceUrl:目标页面会替换当前页,并销毁当前页。这样可以释放当前页的资源,并且无法返回到当前页。

在使用Router相关功能之前,需要在代码中先导入Router模块。
import router from ‘@ohos.router’;
场景三:有一个主页(Index)和一个题目页(PageEquation),希望从主页点击题目类型菜单后,跳转到题目页。同时,需要保证每次只有一个题目页存在于页面栈中,在返回时直接回到主页。这种场景下,可以使用pushUrl方法,并且使用Single实例模式。
let param: Param_Router = {
Index: index,
Orient : this.Orient_V
}
router.pushUrl({
url: ‘pages/PageEquation’,
params: param
}, router.RouterMode.Single, (err) => {
if (err) {
console.error(Invoke pushUrl failed, code is ${err.code}, message is ${err.message});
return;
}
console.info(‘Invoke pushUrl succeeded.’);
});
其中,param是传递的参数,需要自定义一个类,用于传送多个参数。
export class Param_Router {
public Index : number = -1;
public Orient : boolean = true;
}
下一个问题是在题目页中接收参数,可以写在aboutToAppear函数中。
aboutToAppear(): void {
const param : Param_Router = router.getParams() as Param_Router; // 获取传递过来的参数对象
if(param==undefined){
this.index = 0;
}else{
this.index = param.Index;
this.Orient_V = param.Orient;
}
this.title = EquationTypeList[this.index].TypeTitle; // 显示出题目的名称
this.name = EquationTypeList[this.index].TypeName; // 显示出题目的类型
}
这样,就将用户在首页点击的题目类型菜单信息传递到了题目页,APP也跳转到了题目页。
从题目页的返回,用户需要返回首页时,点击相应的图标,通过router模块返回首页,代码如下
Image($r(‘app.media.ic_public_arrow_left’))
.width(20)
.height(20)
.onClick(() => {
router.back(); // 点击图标,返回首页
})
至此,实现了APP的页面路由。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
收藏
回复
举报
回复
    相关推荐