526互联

鸿蒙开发学习笔记-UIAbility-Router页面跳转接口源码分析

发布时间 2023-04-01 11:23:19作者: No3eTB

在鸿蒙开发中，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%')
  }
}