頁面跳轉

（借鑒于：https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101667310940295021）

• 方式一：通過調用router.push()方法，跳轉到Ability內的指定頁面。

每調用一次router.push()方法，均會新建一個頁面。默認情況下，頁面棧數量會加1，頁面棧 支持的最大頁面數量為32。

當頁面棧數量較大或者超過32時，可以通過調用router.clear()方法清除頁面棧中的所有歷史 頁面，僅保留當前頁面作為棧頂頁面。

router.push({ url: 'pages/Second',params: {src: 'Index頁面傳來的數據',} })

• 方式二：router.push()方法新增了mode參數，可以將mode參數配置為router.RouterMode.Single單實例模式和router.RouterMode.Standard標準模式。

router.push({url: 'pages/Second',params: {src: 'Index頁面傳來的數據',} }, router.RouterMode.Single)

• 方式三：router.replace()，跳轉到Ability內的指定頁面。即使用新的頁面替換當前頁面，并銷毀被替換的當前頁面，頁面棧數量不變。

router.replace({url: 'pages/Second',params: {src: 'Index頁面傳來的數據',} })

• 方式四：router.replace()方法新增了mode參數，可以將mode參數配置為router.RouterMode.Single單實例模式和router.RouterMode.Standard標準模式。

router.replace({url: 'pages/Second',params: {src: 'Index頁面傳來的數據',} }, router.RouterMode.Single)

已經實現了頁面的跳轉，接下來，在Second頁面中如何進行自定義參數的接收呢？

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

import router from '@ohos.router';@Entry @Component struct Second {@State src: string = router.getParams()?.['src'];// 頁面刷新展示... }

效果示意圖如圖2-1所示。在Index頁面中，點擊“Next”后，即可從Index頁面跳轉到Second頁面，并在Second頁面中接收參數和進行頁面刷新展示。

圖2-1 Index頁面跳轉到Second頁面

頁面返回和參數接收

說明：

• 調用router.back()返回的目標頁面需要在頁面棧中存在才能正常跳轉。

• 例如調用router.push()方法跳轉到Second頁面，在Second頁面可以通過調用router.back()方法返回到上一個頁面。

• 例如調用router.clear()方法清空了頁面棧中所有歷史頁面，僅保留當前頁面，此時則無法通過調用router.back()方法返回到上一個頁面。

返回上一個頁面。

router.back()

返回到指定頁面。

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

說明：

• router.enableBackPageAlert()方法開啟頁面返回詢問對話框功能，只針對當前頁面生效。例如在調用router.push()或者router.replace()方法，跳轉后的頁面均為新建頁面，因此在頁面返回之前均需要先調用router.enableBackPageAlert()方法之后，頁面返回詢問對話框功能才會生效。

• 如需關閉頁面返回詢問對話框功能，可以通過調用router.disableAlertBeforeBackPage()方法關閉該功能即可。

router.enableBackPageAlert({message: 'Message Info' });

router.back();

在Second頁面中，調用router.back()方法返回上一個頁面或者返回指定頁面時，根據需要繼續增加自定義參數，例如在返回時增加一個自定義參數src。

router.back({url: 'pages/index',params: {src: 'Second頁面傳來的數據',} })

從Second頁面返回到Index頁面。在Index頁面通過調用router.getParams()方法，獲取Second頁面傳遞過來的自定義參數。

import router from '@ohos.router';@Entry @Component struct Index {@State src: string = '';onPageShow() {this.src = router.getParams()?.['src'];}// 頁面刷新展示... }

Second頁面帶參數返回Index頁面

數據請求

a.首先需要導入http 模塊

b.配置權限

• 在config.json的module模塊里配置，示例如下。

• 配置網絡權限

3.彈窗模塊

• 首先需要導入prompt模塊

示例：

prompt.showToast({message: "數據獲取成功",duration: 3000,});

總結

以上是生活随笔為你收集整理的梅科尔工作室-牛炳森-鸿蒙笔记4的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。