鴻蒙開發學習筆記-UIAbility-Router頁面跳轉介面原始碼分析

在鴻蒙開發中，UIAbility的跳轉使用 router 方法.

在使用的時候需匯入

import router from '@ohos.router';

該方法介面成員如下：

1.interface RouterOptions

interface RouterOptions {
    url: string;  // 跳轉頁面的Url
    params?: Object;  // 傳給跳轉頁面的引數params
  }

該成員定義RouterOptions基本物件，在進行頁面跳轉時對應跳轉的url和傳入的引數params，

2.interface RouterState

interface RouterState {

    /**
     * Index of the current page in the stack.
     * NOTE: The index starts from 1 from the bottom to the top of the stack.
     * @since 8
     */
    index: number;

    /**
     * Name of the current page, that is, the file name.
     * @since 8
     */
    name: string;

    /**
     * Path of the current page.
     * @since 8
     */
    path: string;
  }

改成員定義RouterState基本物件，分別保存三個頁面屬性 index,name和path

index：記錄當前頁面在頁面堆疊中的位置

name：記錄當前頁面的名稱，也是檔案名

path：記錄當前頁面的路徑

3.interface EnableAlterOptions

interface EnableAlertOptions {

    /**
     * dialog context.
     * @since 8
     */
    message: string;
  }

該成員定義EnableAlertOptions物件，具有屬性 message:string 保存日志文本

4.function push(options: RouterOptions): void

 /**
   * Navigates to a specified page in the application based on the page URL and parameters.
   * @param options Options.
   * @since 8
   */
  function push(options: RouterOptions):void;

該方法push接受型別為RouterOptions的引數，并進行頁面的跳轉和引數傳遞，回傳void，

5.function replace(options: RouterOptions): void

/**
   * Replaces the current page with another one in the application. The current page is destroyed after replacement.
   * @param options Options.
   * @since 8
   */
  function replace(options: RouterOptions):void;

該方法replace接受型別為RouterOptions的引數，進行頁面的替換和引數傳遞，回傳void，

類似的還有：

6.back()函式，回傳上一個頁面或者回傳指定頁面

function back(options?: RouterOptions): void

7.clear()函式,清除所有歷史頁面，并且僅僅在堆疊頂保存當前頁面

/**
   * Clears all historical pages and retains only the current page at the top of the stack.
   * @since 8
   */
  function clear():void;

8.function getParams(): Object;

/**
   * Obtains information about the current page params.
   * @returns Page params.
   * @since 8
   */
  function getParams(): Object;

該getParams方法用于獲取頁面快取或者被傳入的引數.

***方法使用實體***：

使用兩個簡單的頁面跳轉和回傳來展示router方法的簡單使用

兩個頁面：

./pages/index.ets

./pages/Second.ets

index.ets代碼如下：

import router from '@ohos.router';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Text(this.message)
      Blank()
      Button('Next')
        .onClick(() => {
          router.push({
            url: 'pages/Second',
            params: {
              src: 'Index頁面傳來的資料',
            }
          })
        })

      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

Second.ets 代碼如下：

import router from '@ohos.router';

@Entry
@Component
struct Second {
  @State src: string = router.getParams()?.['src'];

  build() {
    Row() {
      Column() {
        Text(this.src)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button('Back')
          .onClick(() => {
            router.back()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

標籤：其他

上一篇：Android中設定Button為透明

下一篇：Flutter中如何取消任務