鸿蒙开发学习笔记-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@Componentstruct 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@Componentstruct 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%')  }}