Router （路由）

Router 是 HarmonyOS 提供的跨页面导航能力，专门用于实现多个独立@Entry页面之间的切换。

核心属性

• 核心功能：打开新页面、页面间传递数据、返回上一页；
• 运行逻辑：每个路由页面互相隔离，拥有独立生命周期与状态；跳转时旧页面存入页面栈，返回时恢复；
• 适用场景：首页、登录页、详情页、分类页等完整功能页面切换。

1.路由核心 API 与参数详解

（1）pushUrl

this.getUIContext().getRouter().pushUrl({
  url: 'pages/PageOne',
  params: {
    username:"root",
    password:"root"
  }
})

特点：新页面压入页面栈，旧页面保留，可通过 back () 返回上一页。

（2）replaceUrl

this.getUIContext().getRouter().replaceUrl({
  url: 'pages/PageOne',
  params: {
    username:"root",
    password:"root"
  }
})

特点：用新页面直接替换当前页面，当前页面会从页面栈销毁，无法返回上一页；

适用场景：登录成功跳转首页、启动页跳转主页，不需要回到上一页的场景。

2.案例（以pushUrl为例）

页面 1：RouterDemo.ets（首页）

import { router } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';
const DOMAIN = 0xF811;
const TAG = '[Sample_ArkTSRouter]';

@Entry
@Component
struct RouterDemo {
  @State message: string = '你好';
  @State router: string = 'Router联系';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button('页面1', { type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.getUIContext().getRouter().pushUrl({
              url: 'pages/PageOne',
              params:{
                username:"root",
                password:"root"
              }
            })
          })
        // ···
      }
      .width('100%')
    }
    .height('100%')
  }
}

页面 2：PageOne.ets（目标页）

import router from '@ohos.router';
@Entry
@Component
struct pageOne {
  @State message: string = '这是第一个页面';
  @State username:string = ""

  aboutToAppear() {
    const params = router.getParams() as Record<string, string>
    if (params) {
      this.username = params.username
    }
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Text(`${this.username}`)

        Button('返回', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.getUIContext().getRouter().back();
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

展示：

3、运行流程与两种跳转效果对比

1. pushUrl 跳转流程 点击 push 跳转按钮，新页面 PageOne 存入页面栈，原 RouterDemo 页面保留；进入 PageOne 后点击返回按钮，可以回到首页。
2. replaceUrl 跳转流程 点击 replace 跳转按钮，PageOne 直接替换当前 RouterDemo 页面，首页从页面栈销毁；进入 PageOne 后点击返回，无页面可回，无法回到首页。
3. 参数传递效果 两种跳转方法都可以通过 params 携带 username、password，PageOne 页面在 aboutToAppear 中通过 getParams 拿到数据并展示。