【鸿蒙实战开发】HarmonyOS-ArkUI组件（页面路由）

最新推荐文章于 2025-09-03 11:13:57 发布

原创

最新推荐文章于 2025-09-03 11:13:57 发布 · 1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #鸿蒙 #ArkUI

前言

🚀一、路由导航

路由导航是指在应用程序中通过路径导航定位到特定页面的过程。路由导航的实现通常采用路由器（router）来进行管理，路由器根据路径的不同值将用户请求导向到不同的页面。
在HarmonyOS中路由导航主要有：页面跳转、页面返回和页面返回前增加一个询问框

🔎1.编程路由

🦋1.1 页面跳转

页面跳转相关作用：
在这里插入图片描述

Router模块提供了两种跳转模式： router.pushUrl() 和 router.replaceUrl()。router.pushUrl() 可以通过返回键或者调用router.back()方法返回到当前页：
在这里插入图片描述

Router模块提供了两种实例模式： Standard 和 Single：
在这里插入图片描述

☀️1.1.1 保留主页在页面栈中，以便返回时恢复状态

主页（Home）和详情页（Detail）
更多鸿蒙最新技术知识点，请关注作者博客：t.doruo.cn/14DjR1rEY

1、主页

import router from '@ohos.router';
// 在Home页面中
function onJumpClick(): void {
  router.pushUrl({
    url: 'pages/ImagePage' // 目标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.');
  });
}
@Entry
@Component
struct Index {
  build() {
    Row() {
      Button('跳转到图片页面')
        .onClick(e=>{
          onJumpClick()
        })
    }.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).backgroundColor(0xffd306).height('100%').width('100%')
  }
}

在这里插入图片描述

2、详情页

import router from '@ohos.router';
@Entry //FA模式必须有这个
@Component
struct Index {
  @State imageWidth: number = 150

  build() {
    Column() {
      Row(){
        Image($r('app.media.icon'))
          .width(this.imageWidth)
      }
      .width('100%')
      .height(400)
      .justifyContent(FlexAlign.Center)

      Row(){
        Text($r('app.string.width_label'))
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        TextInput({text: this.imageWidth.toFixed(0)})
          .width(150)
          .backgroundColor('#FFF')

最低0.47元/天解锁文章