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