頁面跳轉和兩個頁面之間的數據傳遞-ArkTS

本篇文章主要是對兩個頁面之間數據傳遞進行實現。

關于router的使用

頁面跳轉和參數接受是通過導入 router 模塊實現。

import router from '@ohos.router';

• router.pushUrl() 跳轉到指定頁面。
• **router.replaceUrl() **替換當前頁面并銷毀。
• **router.back() ** 返回上一個頁面。
• router.getParams() 獲取上一個頁面跳轉過來攜帶的參數。
• router.clear() 清空當前頁面棧中所有歷史頁面，只會保留當前頁面作為棧頂頁面。
• router.getLength() 獲取當前頁面棧中的頁面數量。
• router.getState() 獲取當前頁面的狀態信息。
• router.showAlertBeforeBackPage() 開啟頁面返回詢問對話框。
• router.hideAlertBeforeBackPage() 禁用頁面返回詢問對話框。

跳轉頁面的實現方式。

API9及以上，router.pushUrl()方法新增了mode參數，可以將mode參數配置為router.RouterMode.Single單實例模式和router.RouterMode.Standard多實例模式。

router.pushUrl()方法內的基本參數

router.pushUrl({// 跳轉頁面路徑url: '頁面',// 跳轉攜帶的參數params: {變量名：值}
}, 當前模式)

方式一

在多實例模式下：如果目標頁面的url在頁面棧中已經存在同url頁面，離棧頂最近同url頁面會被移動到棧頂，移動后的頁面為新建頁，原來的頁面仍然存在棧中，頁面棧的元素數量不變；如果目標頁面的url在頁面棧中不存在同url頁面，按多實例模式跳轉，頁面棧的元素數量會加1。

// params對象內的變量是可以自定義參數名的，任意名稱都可以只要在接受的時候通過傳遞時過來的變量名稱就可以的。
router.pushUrl({url: 'pages/Second',params: {name: 'Index頁面傳遞'}
}, router.RouterMode.Single)

方式二

在單實例模式下：如果目標頁面的url在頁面棧中已經存在同url頁面，離棧頂最近同url頁面會被移動到棧頂，替換當前頁面，并銷毀被替換的當前頁面，移動后的頁面為新建頁，頁面棧的元素數量會減1；如果目標頁面的url在頁面棧中不存在同url頁面，按多實例模式跳轉，頁面棧的元素數量不變。

// params對象內的變量是可以自定義參數名的，任意名稱都可以只要在接受的時候通過傳遞時過來的變量名稱就可以的。
router.pushUrl({url: 'pages/Second',params: {name: 'Index頁面傳遞'}
}, router.RouterMode.Standard)

頁面接受跳轉傳遞的參數

通過 router.getParams() 方法獲取頁面傳遞過來的自定義參數。

import router from '@ohos.router'
@Entry
@Component
struct Second {// 用于接受由頁面跳轉傳遞的參數名稱@State str: string = router.getParams()?.['name']// 頁面刷新展示....}

頁面返回及攜帶參數

返回上一個頁面

router.back();

返回指定頁面

router.back({url: 'pages/Index'});

返回并攜帶參數

// 需要在 router.back() 方法內類似 router.pushUrl() 的用法
router.back({url: 'pages/Index',params: {src: 'Second傳回來的數據'}
})

接收返回的參數

import router from '@ohos.router'
@Entry
@Component
struct Index {//定義一個變量來接收返回的參數@State src: string = ''// 這是一個生命周期，當頁面每次顯示的時候都會調用onPageShow(){// 通過拿到 router 中名稱為 src 的值this.src = router.getParams()?.['src']}build() {Row() {Column() {// 將返回接收到的值顯示Text(this.src)Button('Next').width("90%").onClick(() => {router.pushUrl({url: 'pages/Second',params: {name: 'Index頁面傳遞'}}, router.RouterMode.Single)})}.width('100%')}.height('100%').backgroundColor('#efefef')}
}

效果

代碼

Index頁面

import router from '@ohos.router'
@Entry
@Component
struct Index {@State message: string = 'Hello World'@State src: string = ''onPageShow(){this.src = router.getParams()?.['src']}build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Text(this.src)Button('Next').width("90%").onClick(() => {router.pushUrl({url: 'pages/Second',params: {name: 'Index頁面傳遞'}}, router.RouterMode.Single)})}.width('100%')}.height('100%').backgroundColor('#efefef')}
}

Second頁面

import router from '@ohos.router'
@Entry
@Component
struct Second {@State message: string = 'Hello World'@State str: string = router.getParams()?.['name']build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Text(this.str)Button('back').onClick(() => {router.back({url: 'pages/Index',params: {src: 'Second傳回來的數據'}})}).width("90%")}.width('100%')}.height('100%').backgroundColor('#efefef')}
}

參考資料

官網文檔：

官網視頻對應文檔

router參考文檔

官網視頻：

官網對應視頻