ArkTS-页面跳转（router）

最新推荐文章于 2025-06-24 00:03:56 发布

永不满足的求知者

最新推荐文章于 2025-06-24 00:03:56 发布

阅读量6k

点赞数 19

CC 4.0 BY-SA版权

分类专栏：鸿蒙ArkTS 文章标签：前端鸿蒙

本文链接：https://blog.csdn.net/qq_41154522/article/details/134645416

鸿蒙ArkTS 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了在OHOS平台中使用Router进行页面跳转、替换、回退、清除历史记录以及获取页面状态的方法，包括RouterOptions参数和RouterMode的选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 导入router

import router from '@ohos.router'

2. 跳转方式

2.1 `router.pushUrl` :跳转到应用内的指定页面

2.1.1 pushUrl(options: RouterOptions): Promise

参数名	说明
options	跳转页面描述信息。

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

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

2.2.1 replaceUrl(options: RouterOptions): Promise

参数名	说明
options	替换页面描述信息。

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

2.3 `router.back`：返回上一页面或指定的页面。

2.3.1 back(options?: RouterOptions ): void

参数名	说明
options	返回页面描述信息，其中参数url指路由跳转时会返回到指定url的界面，如果页面栈上没有url页面，则不响应该情况。如果url未设置，则返回上一页，页面不会重新构建，页面栈里面的page不会回收，出栈后会被回收。

router.back({url:'pages/Home'});

2.4 `router.clear`：清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。

2.4.1 clear(): void

router.clear();

2.5 `router.getLength`：获取当前在页面栈内的页面数量。

参数名	说明
string	页面数量，页面栈支持最大数值是32。

let size = router.getLength();        
console.log('pages stack size = ' + size);

2.6 `router.getState`：获取当前页面的状态信息。

let page = router.getState();
console.log('current index = ' + page.index);
console.log('current name = ' + page.name);
console.log('current path = ' + page.path);

2.7 `router.getParams`：获取发起跳转的页面往当前页传入的参数。

router.getParams();

3. 说明

3.1 RouterOptions

名称	类型	必填	说明
url	string	是	表示目标页面的url，可以用以下两种格式：- 页面绝对路径，由配置文件中pages列表提供，例如：- pages/index/index- pages/detail/detail- 特殊值，如果url的值是"/"，则跳转到首页。
params	object	否	表示路由跳转时要同时传递到目标页面的数据，切换到其他页面时，当前接收的数据失效。跳转到目标页面后，使用router.getParams()获取传递的参数，此外，在类web范式中，参数也可以在页面中直接使用，如this.keyValue(keyValue为跳转时params参数中的key值)，如果目标页面中已有该字段，则其值会被传入的字段值覆盖。说明：params参数不能传递方法和系统接口返回的对象（例如，媒体接口定义和返回的PixelMap对象）。建议开发者提取系统接口返回的对象中需要被传递的基础类型属性，自行构造object类型对象进行传递。

3.2 RouterMode

名称	说明
Standard	标准模式。目标页面会被添加到页面路由栈顶，无论栈中是否存在相同url的页面。说明：不使用路由跳转模式时，按标准模式跳转。
Single	单实例模式。如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近的页面会被移动到栈顶，移动后的页面为新建页。如目标页面的url在页面栈中不存在同url页面，按标准模式跳转。。