。

HarmonyOS提供了Router模块#xff0c;通过不同的url地址#xff0c;可以方便地进行页面路由#xff0c;轻松地访问不同的页面。

本文将从页面跳转、页面返回和页面返回前增加一个询问…1.

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。

HarmonyOS提供了Router模块通过不同的url地址可以方便地进行页面路由轻松地访问不同的页面。

本文将从页面跳转、页面返回和页面返回前增加一个询问框几个方面介绍Router模块提供的功能。

1.1.

页面跳转是开发过程中的一个重要组成部分。

在使用应用程序时通常需要在不同的页面之间跳转有时还需要将数据从一个页面传递到另一个页面。

1.1.1.

Router模块提供了两种跳转模式分别是router.pushUrl()和router.replaceUrl()。

这两种模式决定了目标页是否会替换当前页。

1router.pushUrl()目标页不会替换当前页而是压入页面栈。

这样可以保留当前页的状态并且可以通过返回键或者调用router.back()方法返回到当前页。

2router.replaceUrl()目标页会替换当前页并销毁当前页。

这样可以释放当前页的资源并且无法返回到当前页。

说明页面栈的最大容量为32个页面。

如果超过这个限制可以调用router.clear()方法清空历史页面栈释放内存空间。

1.1.2.实例模式

Router模块提供了两种实例模式分别是Standard和Single。

这两种模式决定了目标url是否会对应多个实例。

1Standard标准实例模式也是默认情况下的实例模式。

每次调用该方法都会新建一个目标页并压入栈顶。

2Single单实例模式。

即如果目标页的url在页面栈中已经存在同url页面则离栈顶最近的同url页面会被移动到栈顶并重新加载如果目标页的url在页面栈中不存在同url页面则按照标准模式跳转。

1.2.

有一个主页Home和一个详情页Detail希望从主页点击一个商品跳转到详情页。

同时需要保留主页在页面栈中以便返回时恢复状态。

这种场景下可以使用pushUrl()方法并且使用Standard实例模式或者省略。

标准实例模式下router.RouterMode.Standard参数可以省略。

private

${err.message});return;}console.info(Invoke

pushUrl

有一个登录页Login和一个个人中心页Profile希望从登录页成功登录后跳转到个人中心页。

同时销毁登录页在返回时直接退出应用。

这种场景下可以使用replaceUrl()方法并且使用Standard实例模式或者省略。

private

${err.message});return;}console.info(Invoke

replaceUrl

有一个设置页Setting和一个主题切换页Theme希望从设置页点击主题选项跳转到主题切换页。

同时需要保证每次只有一个主题切换页存在于页面栈中在返回时直接回到设置页。

这种场景下可以使用pushUrl()方法并且使用Single实例模式。

private

${err.message});return;}console.info(Invoke

pushUrl

有一个搜索结果列表页SearchResult和一个搜索结果详情页SearchDetail希望从搜索结果列表页点击某一项结果跳转到搜索结果详情页。

同时如果该结果已经被查看过则不需要再新建一个详情页而是直接跳转到已经存在的详情页。

这种场景下可以使用replaceUrl()方法并且使用Single实例模式。

private

${err.message});return;}console.info(Invoke

replaceUrl

如果需要在跳转时传递一些数据给目标页则可以在调用Router模块的方法时添加一个params属性并指定一个对象作为参数。

例如

1RouterBean

${err.message});return;}console.info(Invoke

pushUrl

succeeded.);})}3在目标页中可以通过调用Router模块的getParams()方法来获取传递过来的参数。

例如

aboutToAppear()

routerItem?.title;this.msg获取传过来的数据mainIdidtitle}

catch

当用户在一个页面完成操作后通常需要返回到上一个页面或者指定页面这就需要用到页面返回功能。

在返回的过程中可能需要将数据传递给目标页这就需要用到数据传递功能。

1.3.1.方式一

这种方式会返回到上一个页面即上一个页面在页面栈中的位置。

但是上一个页面必须存在于页面栈中才能够返回否则该方法将无效。

private

{//router.back(2)router.back()}1.3.2.方式二返回到指定页面

这种方式可以返回到指定页面需要指定目标页的路径。

目标页必须存在于页面栈中才能够返回。

private

pages/myTool/RouterOnePage});}1.3.3.方式三返回到指定页面并传递自定义参数信息

这种方式不仅可以返回到指定页面还可以在返回的同时传递自定义参数信息。

这些参数信息可以在目标页中通过调用router.getParams()方法进行获取和解析。

private

pages/myTool/RouterOnePage,params:

paramsInfo});}在目标页中在需要获取参数的位置调用router.getParams()方法即可例如在onPageShow()生命周期回调中

onPageShow()

routerItem?.title;this.msg获取传过来的数据mainIdidtitle}

catch

{}}当使用router.back()方法返回到指定页面时原栈顶页面包括到指定页面不包括之间的所有页面栈都将从栈中弹出并销毁。

另外如果使用router.back()方法返回到原来的页面原页面不会被重复创建因此使用State声明的变量不会重复声明也不会触发页面的aboutToAppear()生命周期回调。

如果需要在原页面中使用返回页面传递的自定义参数可以在需要的位置进行参数解析。

例如在onPageShow()生命周期回调中进行参数解析。

1.4.完整代码

../../components/common/TitleBar

import

../../bean/RouterBeanExtend(Button)

function

{.stateEffect(true).type(ButtonType.Normal).borderRadius(8).fontSize(17).backgroundColor($r(app.color.primary_green)).padding({top:

8,bottom:

routerItem?.title;this.msg获取传过来的数据mainIdidtitle}

catch

{//router.pushUrl()//目标页面不会替换当前页而是压入页面栈。

//

options:

pages/myTool/RouterTwoPage,params:

new

{Logger.error(JSON.stringify(err));})}/***有一个主页Home和一个详情页Detail*

standardClick()

${err.message});return;}console.info(Invoke

pushUrl

${err.message});return;}console.info(Invoke

replaceUrl

在返回时直接回到设置页。

这种场景下可以使用pushUrl()方法*

singleClick()

${err.message});return;}console.info(Invoke

pushUrl

succeeded.);});}/***有一个搜索结果列表页SearchResult和一个搜索结果详情页SearchDetail*

而是直接跳转到已经存在的详情页。

这种场景下可以使用replaceUrl()方法*

single2Click()

${err.message});return;}console.info(Invoke

replaceUrl

succeeded.);})}/***如果需要在跳转时传递一些数据给目标页则可以在调用Router模块的方法时*

添加一个params属性并指定一个对象作为参数。

例如*/private

paramsClick()

${err.message});return;}console.info(Invoke

pushUrl

})Button(路由跳转).buttonItem().onClick(this.routerClick)Button(销毁跳转).buttonItem().onClick(this.replaceRouterClick)Button(standard).buttonItem().onClick(this.standardClick)Button(standardReplace).buttonItem().onClick(this.standardReplaceClick)Button(single).buttonItem().onClick(this.singleClick)Button(single2).buttonItem().onClick(this.single2Click)Button(带参路由).buttonItem().onClick(this.paramsClick)Text(this.msg).fontSize(18).fontColor($r(app.color.primary_font_title)).margin({

top:

../../components/common/TitleBar

import

../../bean/RouterBeanExtend(Button)

function

{.stateEffect(true).type(ButtonType.Normal).borderRadius(8).fontSize(17).backgroundColor($r(app.color.primary_green)).padding({top:

8,bottom:

routerItem?.title;this.msg获取传过来的数据mainIdidtitle}

catch

{//router.back(2)router.back()}/***

返回指定页面*/private

pages/myTool/RouterOnePage});}/***

back3Click()

pages/myTool/RouterOnePage,params:

{Column()

})Button(返回到上一个页面).buttonItem().onClick(this.backClick)Button(返回指定页面).buttonItem().onClick(this.back2Click)Button(传参返回).buttonItem().onClick(this.back3Click)Text(this.msg).fontSize(18).fontColor($r(app.color.primary_font_title)).margin({

top: