鸿蒙Router路由跳转——不同页面之间的跳转

℃CCCC

1555人浏览 · 2025-09-03 15:33:21

℃CCCC · 2025-09-03 15:33:21 发布

一、路由跳转

在实际的开发中，一个应用通常是有着多个不同功能和UI的页面。这就涉及到了页面的跳转，通过设定路由来实现在不同页面之间的跳转。目前鸿蒙中有这俩种的方式。一种是router路由，另一种是navigation路由。今天先说一下router路由，需要知道的一点是router路由从api18开始，华为不再提供更新了。

1.创建页面

创建页面有两种方法：

第一种是：鼠标右击pages文件夹，然后选择新建，选择page，再选择empty page即可。如图所示。

第二种是：添加一个新的普通页面，然后在src/main/resources/base/profile 中的 main_pages.json 文件中配置页面。注意：要使用双引号。

{
  "src": [
    "pages/Index",
    "pages/DetailPage"
  ]
}

2.页面跳转

首先是经常使用的跳转和后退功能。使用router的方法可以实现此效果。页面的跳转方法有两个，一个是可以返回的跳转，一个是无法返回的跳转。

//导入router
import { router } from '@kit.ArkUI'
// 1.调用方法-普通跳转(可以返回)
router.pushUrl({
  url:'页面地址'
})

// 2.调用方法-替换跳转（无法返回）
router.replaceUrl({
  url:'页面地址'
})

页面返回则是使用back方法

router.back()

3.例子

接下来，我们先创建三个页面，同时配置好页面。三个页面分别是Index DemoA DemoB。

import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('首页')
        .fontSize(30)
      Button('去详情页')
        .onClick(() => {
          // 方法一    pushUrl 跳转页面 可以返回
          router.pushUrl({
            url: 'pages/DemoA'
          })
          // 方法二      replaceUrl 跳转页面 不可以返回
          // router.replaceUrl({
          //   url: 'pages//DemoA'
          // })

        })
    }
    .width('100%')
    .height('100%')
  }
}

import { router } from '@kit.ArkUI'
@Entry
@Component
struct DemoA {
  build() {
    Column() {
      Text('详情页')
        .fontSize(40)
      Button('跳转到我的页面')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/DemoB'
          })
        })
      Button('返回上一页')
        .onClick(() => {
          //back  返回上一页
          router.back()
        })

    }
    .width('100%')
    .height('100%')
  }
}

import { router } from '@kit.ArkUI'

@Entry
@Component
struct DemoB {
  build() {
    Column() {
      Text('我的')
        .fontSize(30)
      Button('back返回')
        .onClick(() => {
          router.back()
        })
      Button('跳转到详情页面')
        .onClick(() => {
          router.replaceUrl({
            url: 'pages/DemoA'
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}

首先在首页点击按钮可以跳到详情页（DemoA）此时跳转使用的是可以返回的跳转，所以点击返回按钮可以返回到首页。当我们跳到我的页面（DemoB）中点击跳转到详情页面按钮时，会触发没有返回的跳转，这时在页面点击返回按钮的话不会返回到我的页面，而是会跳转到详情页，视觉上就是原地跳转了一下，这是因为，没有返回的跳转在跳转页面之后会将原来的页面删除掉。所以返回就会跳转到删除页面的上一个页面。