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

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组件跳转到Second页面Navigator({

target:

'pages/Second',

type:

NavigationType.Push

})

{

Button('跳转')}.params({

name:

"abc",

age:

23

})target是指定跳转目标页面的路径，type指定路由方式。路由方式由枚举值.NavigationType枚举值说明：