《HarmonyOS应用开发基础》 课件知识点2-9 UIAbility内页面的跳转与数据传递.pptx

UIAbility内页面的跳转与数据传递

概述为了丰富应用的内容，一个UIAbility内可能有多个页面，这就涉及到UIAbility内页面的跳转与数据传递。页面间的跳转可以通过页面路由router模块来实现。也可以通过Navigator路由容器组件实现。

router模块页面路由模块根据页面url找到目标页面，从而实现跳转。通过页面路由模块，可以使用不同的url访问不同的页面，包括跳转到UIAbility内的指定页面、用UIAbility内的某个页面替换当前页面、返回上一页面或指定的页面等。具体使用方法请参见@ohos.router(页面路由)。

使用router模块进行页面跳转和参数接收1.在使用页面路由之前，需要先导入router模块。importrouterfrom@ohos.router;2.使用router模块进行页面跳转的方式有两种：（使用Index跳往Second举例）方式一：router.pushUrl()方式跳转页面（Index页面不会销毁，可以通过back返回）router.pushUrl({??url:?‘pages/Second’,//目标页面路径??params:?{//参数????src:?‘Index页面传来的数据’,??}},?router.RouterMode.Single)//模式，RouterMode.Single单例或RouterMode.Standard

使用router模块进行页面跳转和参数接收方式二：router.replaceUrl()方式跳转页面（Index页面会被销毁）router.replaceUrl({??url:?‘pages/Second’,//目标页面路径??params:?{//参数????src:?‘Index页面传来的数据’,??}},?router.RouterMode.Single)//模式，RouterMode.Single单例或RouterMode.Standard

两种跳转方式页面栈对比IndexIndexSecondpushUrl方式replaceUrl方式Second

使用router模块进行页面跳转和参数接收在完成向目标页面跳转后，怎么在目标页面接收跳转携带的参数呢？3.参数接收调用router.getParams()方法获取Index页面传递过来的自定义参数。import?router?from?@ohos.router;@Entry@Componentstruct?Second?{??@State?src:?string?=?router.getParams()?.[src];??//?页面刷新展示??...}

使用router模块进行页面跳转和参数接收页面跳转效果示例图

使用router模块进行页面跳转和参数接收前面我们举例介绍了如何从Index页面跳转到Second页面，若在Second页面完成操作后，想要返回到Index页面，应该如何实现呢？IndexSecondpushUrl方式SecondreplaceUrl方式调用router.back()返回的目标页面需要在页面栈中存在才能正常跳转。例如调用router.pushUrl()方法跳转到Second页面，在Second页面可以通过调用router.back()方法返回到上一个页面。在Second页面调用pushUrl()方法或replaceUrl()方法到Index不叫页面返回。返回上一个页面。router.back();返回到指定页面。router.back({url:pages/Index});页面返回页面栈中无返回的目标页面，无法返回

使用router模块进行页面跳转和参数接收router.back({??url:?pages/Index,??params:?{????src:?Second页面传来的数据,??}})页面返回示例：import?router?from?@ohos.router;@Entry@Componentstruct?Index?{??@State?src:?string?=?;??onPageShow()?{????this.src?=?router.getParams()?.[src];??}??//?页面刷新展示??...}1.在Second页面中返回，并携带参数2.在Index页面中接收参数

使用router模块进行页面跳转和参数接收页面返回效果图

Navicator路由容器组件Navigator组件也可以进行页面跳转，因为Navigator是一个容器组件，所以在使用时是用Navigator组件包裹住子组件，子组件被点击时实现页面跳转并传参。

Navicator路由容器组件使用Navigator组件跳