鴻蒙開發學習筆記-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%')
  }
}