鴻蒙極速入門(五)-路由管理(Router)

来源:https://www.cnblogs.com/anywherego/archive/2023/10/26/17790103.html
-Advertisement-
Play Games

頁面路由指在應用程式中實現不同頁面之間的跳轉和數據傳遞。HarmonyOS提供了Router模塊,通過不同的url地址,可以方便地進行頁面路由,輕鬆地訪問不同的頁面。 一、基礎使用 Router模塊提供了兩種跳轉模式,分別是router.pushUrl()和router.replaceUrl()。這 ...


頁面路由指在應用程式中實現不同頁面之間的跳轉和數據傳遞。HarmonyOS提供了Router模塊,通過不同的url地址,可以方便地進行頁面路由,輕鬆地訪問不同的頁面。

一、基礎使用

Router模塊提供了兩種跳轉模式,分別是router.pushUrl()和router.replaceUrl()。這兩種模式決定了目標頁面是否會替換當前頁。

  • router.pushUrl():目標頁面不會替換當前頁,而是壓入頁面棧。這樣可以保留當前頁的狀態,並且可以通過返回鍵或者調用router.back()方法返回到當前頁。
  • router.replaceUrl():目標頁面會替換當前頁,並銷毀當前頁。這樣可以釋放當前頁的資源,並且無法返回到當前頁。

註意:頁面棧的最大容量為32個頁面。如果超過這個限制,可以調用router.clear()方法清空歷史頁面棧,釋放記憶體空間。

Router模塊提供了兩種實例模式,分別是Standard和Single。這兩種模式決定了目標url是否會對應多個實例。

  • Standard:多實例模式,也是預設情況下的跳轉模式。目標頁面會被添加到頁面棧頂,無論棧中是否存在相同url的頁面。
  • Single:單實例模式。如果目標頁面的url已經存在於頁面棧中,則會將離棧頂最近的同url頁面移動到棧頂,該頁面成為新建頁。如果目標頁面的url在頁面棧中不存在同url頁面,則按照預設的多實例模式進行跳轉。

在使用頁面路由Router相關功能之前,需要在代碼中先導入Router模塊。

import router from '@ohos.router';

跳轉示例

1.普通跳轉

function onJumpClick(): void {
  router.pushUrl({
    url: 'pages/Detail' // 目標url
  });
}

2.帶跳轉模式和跳轉結果

比如從其他頁面,跳轉到登錄頁面(全局唯一)

function onJumpClick(): void {
  router.pushUrl({
    url: 'pages/Detail' // 目標url
  }, router.RouterMode.Single, (err) => {
    if (err) {
      console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke pushUrl succeeded.');
  });
}

3.替換原頁面

比如從啟動頁面跳轉到首頁,同時需要銷毀啟動頁

function onJumpClick(): void {
  router.replaceUrl({
    url: 'pages/Profile' // 目標url
  });
}

4.帶參數

在調用Router模塊的方法時,添加一個params屬性,並指定一個對象作為參數:

class DataModelInfo {
  age: number;
}

class DataModel {
  id: number;
  info: DataModelInfo;
}

function onJumpClick(): void {
  // 在Home頁面中
  let paramsInfo: DataModel = {
    id: 123,
    info: {
      age: 20
    }
  };

  router.pushUrl({
    url: 'pages/Detail', // 目標url
    params: paramsInfo // 添加params屬性,傳遞自定義參數
  }, (err) => {
    if (err) {
      console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke pushUrl succeeded.');
  })
}

在目標頁面中,可以通過調用Router模塊的getParams()方法來獲取傳遞過來的參數。

const params = router.getParams(); // 獲取傳遞過來的參數對象
const id = params['id']; // 獲取id屬性的值
const age = params['info'].age; // 獲取age屬性的值

頁面返回

1.返回上一頁

router.back();

2.返回到指定頁面

router.back({
  url: 'pages/Home' // 指定url
});

3.返回到指定頁面,並傳遞自定義參數信息。

router.back({
  url: 'pages/Home',
  params: {
    info: '來自Home頁'
  }
});

4.目標頁面中,在需要獲取參數的位置調用router.getParams()方法即可,例如在onPageShow()生命周期回調中:

onPageShow() {
  const params = router.getParams(); // 獲取傳遞過來的參數對象
  const info = params['info']; // 獲取info屬性的值
}

頁面返回的特別說明

當使用router.back()方法返回到指定頁面時,該頁面會被重新壓入棧頂,而原棧頂頁面(包括)到指定頁面(不包括)之間的所有頁面棧都將被銷毀。

如果使用router.back()方法返回到原來的頁面,原頁面不會被重覆創建,因此使用@State聲明的變數不會重覆聲明,也不會觸發頁面的aboutToAppear()生命周期回調。如果需要在原頁面中使用返回頁面傳遞的自定義參數,可以在需要的位置進行參數解析。例如,在onPageShow()生命周期回調中進行參數解析。

二、命名路由

為了支持組件化,HarmonyOS支持多HAP機制共用包機制

在開發中為了跳轉到共用包中的頁面,可以使用router.pushNamedRoute()來實現,也就是命名路由的方式。

示例

在想要跳轉到的共用包頁面里,給@Entry修飾的自定義組件命名:

// library/src/main/ets/pages/Index.ets
// library為新建共用包自定義的名字
@Entry({ routeName : 'myPage' })
@Component
struct MyComponent {
}

配置成功後需要在需要跳轉的頁面中引入命名路由的頁面:

// entry/src/main/ets/pages/Index.ets
import router from '@ohos.router';
import 'library/src/main/ets/pages/Index' // 引入共用包library中的命名路由頁面

@Entry
@Component
struct Index {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })
        .backgroundColor('#ccc')
        .onClick(() => { // 點擊跳轉到其他共用包中的頁面
          try {
            router.pushNamedRoute({
              name: 'myPage',
              params: {
                data1: 'message',
                data2: {
                  data3: [123, 456, 789]
                }
              }
            })
          } catch (err) {
            console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
          }
        })
    }
    .width('100%')
    .height('100%')
  }
}

其他

基於命名路由技術方案時,建議將路由URL統一放在一個文件中做管理。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MDI窗體的相關學習使用 1、設置MDI父窗體 在屬性中找到IsMdiContainer選項,設置為True 2、添加MDI子窗體,在項目中依次選擇添加->窗體,然後一直預設即可 添加後的項目目錄(Form1為父視窗,Form2、Form3為子視窗) 3、在Form1.cs中,創建對應MDI子視窗的 ...
  • 【學習課程】:【【小白入門 通俗易懂】2021韓順平 一周學會Linux】 https://www.bilibili.com/video/BV1Sv411r7vd/?p=14&share_source=copy_web&vd_source=2c07d62293f5003c919b2df9b2e054 ...
  • 電腦數據的表示 1. 數值數據的表示 1.1 各種進位數的表示 二進位 (Binary) :以 0b 或 0B 開頭,字元僅含0和1. 用下標2或者數字後面加B表示。如 $(1011)_2$ 或 $1011B$ 八進位 (Octal) :以 0o 或 0O 開頭,字元含0-7. 用下標8或者數字後 ...
  • 1. 圖論 1.1. 起源於萊昂哈德·歐拉在1736年發表的一篇關於“哥尼斯堡七橋問題”的論文 1.2. 要解決這個問題,該圖需要零個或兩個具有奇數連接的節點 1.3. 任何滿足這一條件的圖都被稱為歐拉圖 1.4. 如果路徑只訪問每條邊一次,則該圖具有歐拉路徑 1.5. 如果路徑起點和終點相同,則該 ...
  • 天下武功,無堅不摧,唯快不破!我的名字叫 Redis,全稱是 Remote Dictionary Server。 有人說,組 CP,除了要瞭解她外,還要給機會讓她瞭解你。 那麼,作為開發工程師的你,是否願意認真閱讀此心法抓住機會來瞭解我,運用到你的系統中提升性能。 我遵守 BSD 協議,由義大利人 ...
  • 一、背景 公元2023-10-12(周四)上午,組內的亞梅反饋,用戶生成標簽報死鎖異常 二、排查異常日誌 查到當時報錯的日誌 具體異常信息如下 server-provider-info-2023-10-12.0.log:2023-10-12 09:40:50.593 [TID:bf623bded18 ...
  • 在資料庫中,對象的創建者將成為該對象的所有者,具有對該對象進行查詢、修改和刪除等操作的許可權。同時,系統管理員也擁有與所有者相同的許可權。 ...
  • 本文介紹了視頻黑屏的可能原因和解決方案。主要原因包括用戶主動關閉視頻、網路問題和渲染問題。解決方案包括優化網路穩定性、確保視頻渲染視圖設置正確、提供清晰的提示、實時監測網路質量、使用詳細的日誌系統、開啟視頻預覽功能、使用視頻流回調、處理編解碼問題、處理許可權問題、自定義視頻渲染邏輯和使用實時反饋系統。... ...
一周排行
    -Advertisement-
    Play Games
  • 一個自定義WPF窗體的解決方案,借鑒了呂毅老師的WPF製作高性能的透明背景的異形視窗一文,併在此基礎上增加了滑鼠穿透的功能。可以使得透明窗體的滑鼠事件穿透到下層,在下層窗體中響應。 ...
  • 在C#中使用RabbitMQ做個簡單的發送郵件小項目 前言 好久沒有做項目了,這次做一個發送郵件的小項目。發郵件是一個比較耗時的操作,之前在我的個人博客裡面回覆評論和友鏈申請是會通過發送郵件來通知對方的,不過當時只是簡單的進行了非同步操作。 那麼這次來使用RabbitMQ去統一發送郵件,我的想法是通過 ...
  • 當你使用Edge等瀏覽器或系統軟體播放媒體時,Windows控制中心就會出現相應的媒體信息以及控制播放的功能,如圖。 SMTC (SystemMediaTransportControls) 是一個Windows App SDK (舊為UWP) 中提供的一個API,用於與系統媒體交互。接入SMTC的好 ...
  • 最近在微軟商店,官方上架了新款Win11風格的WPF版UI框架【WPF Gallery Preview 1.0.0.0】,這款應用引入了前沿的Fluent Design UI設計,為用戶帶來全新的視覺體驗。 ...
  • 1.簡單使用實例 1.1 添加log4net.dll的引用。 在NuGet程式包中搜索log4net並添加,此次我所用版本為2.0.17。如下圖: 1.2 添加配置文件 右鍵項目,添加新建項,搜索選擇應用程式配置文件,命名為log4net.config,步驟如下圖: 1.2.1 log4net.co ...
  • 之前也分享過 Swashbuckle.AspNetCore 的使用,不過版本比較老了,本次演示用的示例版本為 .net core 8.0,從安裝使用開始,到根據命名空間分組顯示,十分的有用 ...
  • 在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
  • WPF的按鈕提供了Template模板,可以通過修改Template模板中的內容對按鈕的樣式進行自定義。結合資源字典,可以將自定義資源在xaml視窗、自定義控制項或者整個App當中調用 ...
  • 實現了一個支持長短按得按鈕組件,單擊可以觸發Click事件,長按可以觸發LongPressed事件,長按鬆開時觸發LongClick事件。還可以和自定義外觀相結合,實現自定義的按鈕外形。 ...
  • 一、WTM是什麼 WalkingTec.Mvvm框架(簡稱WTM)最早開發與2013年,基於Asp.net MVC3 和 最早的Entity Framework, 當初主要是為瞭解決公司內部開發效率低,代碼風格不統一的問題。2017年9月,將代碼移植到了.Net Core上,併進行了深度優化和重構, ...