HarmonyOS NEXT鸿蒙开发：页面间跳转(页面路由router)

说明

鸿蒙开发中，一个页面跳转到另一个页面，使用 Router 模块，与Vue、React框架有些类似

官网指南
官网API

应用场景

【登录】页面 -> 【首页】页面 -> 【我的】页面

跳转模式

Router模块提供了两种跳转模式：

• router.pushUrl()
• router.replaceUrl()

router.pushUrl()

目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态

可以通过 返回键 或者调用 router.back() 方法返回到当前页

**应用场景：**通用

router.replaceUrl()

目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

应用场景： 登录成功后，跳转到【首页】，使用该方式，点击后退，不会后退到【登录】页面

页面栈的最大容量

页面栈的最大容量为32个页面。如果超过这个限制，可以调用router.clear() 方法清空历史页面栈，释放内存空间。

导入模块

在使用页面路由Router相关功能之前，需要在代码中先导入Router模块。

import router from '@ohos.router';

router.pushUrl() 说明

跳转到应用内的指定页面。

api1

pushUrl(options: RouterOptions): Promise<void>

参数：

• options：RouterOptions类型，必填项，跳转页面描述信息

RouterOptions

路由跳转选项，对象，有以下属性：

• url：string类型，必填，表示目标页面的url，可以用以下两种格式：

• 页面绝对路径，由配置文件中pages列表提供，例如：

  • pages/index/index

  • pages/detail/detail

• 特殊值，如果url的值是"/"，则跳转到首页。

• params：object类型，表示路由跳转时要同时传递到目标页面的数据，切换到其他页面时，当前接收的数据失效。跳转到目标页面后，使用 router.getParams() 获取传递的参数，此外，在类web范式中，参数也可以在页面中直接使用，如this.keyValue(keyValue为跳转时params参数中的key值)，如果目标页面中已有该字段，则其值会被传入的字段值覆盖。

案例一

有一个主页（Home）和一个详情页（Detail），希望从主页点击一个商品，跳转到详情页。同时，需要保留主页在页面栈中，以便返回时恢复状态。这种场景下，可以使用pushUrl()方法，并且使用Standard实例模式（或者省略）。

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

例子

router.pushUrl({
  url: 'pages/routerpage2',
  params: {
    data1: 'message',
    data2: {
      data3: [123, 456, 789]
    }
  }
})
  .then(() => {
    // success
  })
  .catch(err => {
    console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
  })

api2

pushUrl(options: RouterOptions, callback: AsyncCallback<void>): void

参数：

• options：RouterOptions类型，必填，跳转页面描述信息。

• callback：AsyncCallback<void> 类型，必填，异常响应回调。

例子

router.pushUrl({
  url: 'pages/routerpage2',
  params: {
    data1: 'message',
    data2: {
      data3: [123, 456, 789]
    }
  }
}, (err) => {
  if (err) {
    console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('pushUrl success');
});

router.replaceUrl() 说明

用应用内的某个页面替换当前页面，并销毁被替换的页面。不支持设置页面转场动效，如需设置，推荐使用Navigation组件。

api1

replaceUrl(options: RouterOptions): Promise<void>

参数：

• options：RouterOptions类型，必填，跳转页面描述信息。

例子

router.replaceUrl({
  url: 'pages/detail',
  params: {
    data1: 'message'
  }
})
  .then(() => {
    // success
  })
  .catch(err => {
    console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
  })

api2

replaceUrl(options: RouterOptions, callback: AsyncCallback<void>): void

参数：

• options：RouterOptions类型，必填，跳转页面描述信息。

• callback：AsyncCallback<void> 类型，必填，异常响应回调。

例子

router.replaceUrl({
  url: 'pages/detail',
  params: {
    data1: 'message'
  }
}, (err) => {
  if (err) {
    console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('replaceUrl success');
});

实例模式

分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。

• Standard：标准实例模式，也是默认情况下的实例模式。每次调用该方法都会新建一个目标页，并压入栈顶。

• Single：单实例模式。即如果目标页的url在页面栈中已经存在同url页面，则离栈顶最近的同url页面会被移动到栈顶，并重新加载；如果目标页的url在页面栈中不存在同url页面，则按照标准模式跳转。