HarmonyOS 鸿蒙Next应用“丁斗口算”开发记录(4)

HarmonyOS 鸿蒙Next应用“丁斗口算”开发记录(4) 页面路由

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

页面跳转

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

以本APP为例，需要从首页跳转到题目页面。在首页中点击不同的菜单时，跳转到同一个题目页面，同时传递用户点击的菜单信息。在题目页面获取到信息后，生成不同类型的题目。

题目页

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的页面路由。