《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識點2-9 UIAbility內(nèi)頁面的跳轉(zhuǎn)與數(shù)據(jù)傳遞

UIAbility內(nèi)頁面的跳轉(zhuǎn)與數(shù)據(jù)傳遞概述為了豐富應(yīng)用的內(nèi)容，一個UIAbility內(nèi)可能有多個頁面，這就涉及到UIAbility內(nèi)頁面的跳轉(zhuǎn)與數(shù)據(jù)傳遞。頁面間的跳轉(zhuǎn)可以通過頁面路由router模塊來實現(xiàn)。也可以通過Navigator路由容器組件實現(xiàn)。router模塊頁面路由模塊根據(jù)頁面url找到目標頁面，從而實現(xiàn)跳轉(zhuǎn)。通過頁面路由模塊，可以使用不同的url訪問不同的頁面，包括跳轉(zhuǎn)到UIAbility內(nèi)的指定頁面、用UIAbility內(nèi)的某個頁面替換當前頁面、返回上一頁面或指定的頁面等。具體使用方法請參見@ohos.router(頁面路由)。使用router模塊進行頁面跳轉(zhuǎn)和參數(shù)接收1.在使用頁面路由之前，需要先導入router模塊。importrouterfrom'@ohos.router';2.使用router模塊進行頁面跳轉(zhuǎn)的方式有兩種：（使用Index跳往Second舉例）方式一：router.pushUrl()方式跳轉(zhuǎn)頁面（Index頁面不會銷毀，可以通過back返回）router.pushUrl({

url:

‘pages/Second’,//目標頁面路徑

params:

{

//參數(shù)

src:

‘Index頁面?zhèn)鱽淼臄?shù)據(jù)’,

}},

router.RouterMode.Single)//模式，RouterMode.Single單例或RouterMode.Standard使用router模塊進行頁面跳轉(zhuǎn)和參數(shù)接收方式二：router.replaceUrl()方式跳轉(zhuǎn)頁面（Index頁面會被銷毀）router.replaceUrl({

url:

‘pages/Second’,//目標頁面路徑

params:

{

//參數(shù)

src:

‘Index頁面?zhèn)鱽淼臄?shù)據(jù)’,

}},

router.RouterMode.Single)//模式，RouterMode.Single單例或RouterMode.Standard兩種跳轉(zhuǎn)方式頁面棧對比IndexIndexSecondpushUrl方式replaceUrl方式Second使用router模塊進行頁面跳轉(zhuǎn)和參數(shù)接收在完成向目標頁面跳轉(zhuǎn)后，怎么在目標頁面接收跳轉(zhuǎn)攜帶的參數(shù)呢？3.參數(shù)接收調(diào)用router.getParams()方法獲取Index頁面?zhèn)鬟f過來的自定義參數(shù)。import

router

from

'@ohos.router';@Entry@Componentstruct

Second

{

@State

src:

string

=

router.getParams()?.['src'];

//

頁面刷新展示

...}使用router模塊進行頁面跳轉(zhuǎn)和參數(shù)接收頁面跳轉(zhuǎn)效果示例圖使用router模塊進行頁面跳轉(zhuǎn)和參數(shù)接收前面我們舉例介紹了如何從Index頁面跳轉(zhuǎn)到Second頁面，若在Second頁面完成操作后，想要返回到Index頁面，應(yīng)該如何實現(xiàn)呢？IndexSecondpushUrl方式SecondreplaceUrl方式調(diào)用router.back()返回的目標頁面需要在頁面棧中存在才能正常跳轉(zhuǎn)。例如調(diào)用router.pushUrl()方法跳轉(zhuǎn)到Second頁面，在Second頁面可以通過調(diào)用router.back()方法返回到上一個頁面。在Second頁面調(diào)用pushUrl()方法或replaceUrl()方法到Index不叫頁面返回。返回上一個頁面。router.back();返回到指定頁面。router.back({url:'pages/Index'});頁面返回頁面棧中無返回的目標頁面，無法返回使用router模塊進行頁面跳轉(zhuǎn)和參數(shù)接收router.back({

url:

'pages/Index',

params:

{

src:

'Second頁面?zhèn)鱽淼臄?shù)據(jù)',

}})頁面返回示例：import

router

from

'@ohos.router';@Entry@Componentstruct

Index

{

@State

src:

string

=

'';

onPageShow()

{

this.src

=

router.getParams()?.['src'];

}

//

頁面刷新展示

...}1.在Second頁面中返回，并攜帶參數(shù)2.在Index頁面中接收參數(shù)使用router模塊進行頁面跳轉(zhuǎn)和參數(shù)接收頁面返回效果圖Navicator路由容器組件Navigator組件也可以進行頁面跳轉(zhuǎn)，因為Navigator是一個容器組件，所以在使用時是用Navigator組件包裹住子組件，子組件被點擊時實現(xiàn)頁面跳轉(zhuǎn)并傳參。Navicator路由容器組件使用Navigator組件跳轉(zhuǎn)到Second頁面Navigator({

target:

'pages/Second',

type:

NavigationType.Push

})

{

Button('跳轉(zhuǎn)')}.params({

name:

"abc",

age:

23

})target是指定跳轉(zhuǎn)目標頁面的路徑，type指定路由方式。路由方式由枚舉值.NavigationType枚舉值說明：