写给初学者的 HarmonyOS 教程 -- 页面路由（router）

news2025/6/9 19:51:47

页面路由（router）是指在应用程序中实现不同页面之间的跳转和数据传递。

HarmonyOS 提供了 Router 模块，通过不同的 url 地址，可以方便地进行页面路由，轻松地访问不同的页面。

类似这样的效果：

在这里插入图片描述

页面跳转是开发过程中的一个重要组成部分。在使用应用程序时，通常需要在不同的页面之间跳转，有时还需要将数据从一个页面传递到另一个页面（类似 Activity 跳转）。

Router 模块：提供了两种 跳转模式，分别是 router.pushUrl() 和 router.replaceUrl()。

这两种模式决定了目标页是否会替换当前页。

跳转模式说明
router.pushUrl()目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用 router.back() 方法返回到当前页。
router.replaceUrl()目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

Router 模块：提供了两种 实例模式，分别是 Standard 和 Single。

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

实例模式说明
Standard标准实例模式，也是默认情况下的实例模式。
每次调用该方法都会新建一个目标页，并压入栈顶。
Single单实例模式。如果目标页的 url 在页面栈中已经存在同 url 页面，
则离栈顶最近的同 url 页面会被移动到栈顶，并重新加载；
如果目标页的 url 在页面栈中不存在同 url 页面，则按照标准模式跳转。

构建第一个界面

接下来我们实操一下，首先创建一个功能，默认的界面代码如下：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行效果：

在这里插入图片描述

在默认页面基础上，我们添加一个 Button 组件，作为按钮响应用户点击，从而实现跳转到另一个页面。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next').fontSize(30).fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({ top: 20 })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行效果：

在这里插入图片描述

构建第二个界面

接下来创建第二个我们需要跳转的界面。

新建第二个页面文件。在“Project”窗口，打开“entry > src > main > ets ”，右键点击“pages”文件夹，选择“New > ArkTS File”，命名为“Second”，点击“Finish”。

在这里插入图片描述

创建好 Second.ets 后，需要 手动配置 好第二个界面的路由信息。

在“Project”窗口，打开“entry > src > main > resources > base > profile”，在 main_pages.json 文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下：

在这里插入图片描述

如果你仔细的话，会发现上面我对手动配置加粗了，其实创建新的界面还有更简洁的方法。

我们可以在右键点击“pages”文件夹时，选择“New > Page”，这样的话就无需手动配置相关页面路由了，比如我们再创建一个新的界面：Third.ets。

在这里插入图片描述

你会发现 main_pages.json 会默认添加 Third 界面的路由：

{
  "src": [
    "pages/Index",
    "pages/Second",
    "pages/Third"
  ]
}

刚刚创建的 Second 页面没有任何代码，我们添加相关文本，并且我们也给它搞一个 Button。

预览效果：

在这里插入图片描述

实现界面跳转

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

import router from '@ohos.router';

router.pushUrl()

import router from '@ohos.router'  // 导入页面路由模块

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next').fontSize(30).fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({ top: 20 })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 跳转按钮绑定 onClick 事件，点击时跳转到第二页
        .onClick(() => {
          // 跳转到第二页
          router.pushUrl({ url: 'pages/Second' })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

这样就可以实现页面的跳转了，看下效果：

在这里插入图片描述

router.back()

在第二个页面中，我们可以给返回按钮绑定 onClick 事件，点击按钮时返回到第一页。

import router from '@ohos.router'

@Entry
@Component
struct Second {
  @State message: string = 'Hi there'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        .onClick(() => {
          router.back()  // 返回到第一页
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行效果：

在这里插入图片描述

router.replaceUrl

router.replaceUrl 主要用于目标页替换当前页，并销毁当前页。比如有一个常用场景：一个登录页（Login）和一个个人中心页，希望从登录页成功登录后，跳转到个人中心页。同时销毁登录页，再返回时直接退出应用。

import router from '@ohos.router'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next').fontSize(30).fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({ top: 20 })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        .onClick(() => {
          // router.replaceUrl({ url: 'pages/Second' })
          // replaceUrl 实现跳转后会销毁前一个页面
          router.replaceUrl({ url: 'pages/Second' })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行效果：

在这里插入图片描述

传递数据

如果需要在跳转时传递一些数据给目标页，则可以在调用 Router 模块的方法时，添加一个 params 属性，并指定一个对象作为参数。例如：

第一个页面

import router from '@ohos.router'

class DataModel {
  info: String;
}

let paramsInfo: DataModel = {
  info: '第一页传过来的数据'
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next').fontSize(30).fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({ top: 20 })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Second',
            params: paramsInfo
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

第二个页面

import router from '@ohos.router'

const params = router.getParams(); // 获取传递过来的参数对象

@Entry
@Component
struct Second {
  @State message: string = 'Hi there'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(params['info'])
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        .onClick(() => {
          router.back()
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行效果：

在这里插入图片描述

页面返回

返回上一个页面

上面我们其实已经看到了一个很简单的关于页面返回的例子，调用 router.back() 即可。

router.back();

返回到指定页面

另外，我们还可以添加 url 参数指定返回的界面。

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

比如现在工程里面还有一个 Third 的页面。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        ... ...
        Button() {
          Text('Next').fontSize(30).fontWeight(FontWeight.Bold)
        }
        ... ...
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Second',  // 跳转到第二个页面
            params: paramsInfo
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Entry
@Component
struct Second {
  @State message: string = 'Hi there'

  build() {
    Row() {
      Column() {
        ... ...
        Button() {
          Text('Next')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        ... ...
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Third'  // 跳转到第三个页面
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Entry
@Component
struct Third {
  @State message: string = 'Third Page'

  build() {
    Row() {
      Column() {
        ... ...
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        ... ...
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Index'. // 指定 Third 返回到首页 Index
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

在这里插入图片描述

带参数信息返回

同样的，返回到指定页面也可以传递自定义参数信息。

router.back({
  url: 'pages/Home',
  params: {
    info: '来自Home页'
  }
});

在目标页中，在需要获取参数的位置调用 router.getParams() 方法即可。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1285587.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MISRA C 2012 标准浅析

MISRA C 2012 标准浅析

MISRA(The Motor Industry Software Reliability Association)，汽车工业软件可靠性联会； 1994年，英国成立。致力于协助汽车厂商开发安全可靠的软件的跨国协会，其成员包括：AB汽车电子、罗孚汽车、宾利汽车、福特汽车、捷…
阅读更多...
从0到1的跨境电商创业经验分享！个人如何做跨境电商创业？

从0到1的跨境电商创业经验分享！个人如何做跨境电商创业？

近年来，跨境电商成为了一种非常流行的创业方式，都知道国内贸易不好做，许多卖家都想通过跨境电商创业，但他们不知道具体的过程，今天龙哥我就分享一下我自己在跨境电商创业总结出来的经验，帮助你在跨境电商领…
阅读更多...
Apollo新版本Beta自动驾驶技术沙龙参会体验有感—百度自动驾驶开源框架

Apollo新版本Beta自动驾驶技术沙龙参会体验有感—百度自动驾驶开源框架

在繁忙的都市生活中，我们时常对未来的科技发展充满了好奇和期待。而近日，我有幸参加了一场引领科技潮流的线下技术沙龙，主题便是探索自动驾驶的魅力——一个让我们身临其境感受创新、了解技术巨擘的机会。 在12月2日我有幸参加了Apollo新版本…
阅读更多...
基于Linux的网络防火墙设计方法

基于Linux的网络防火墙设计方法

摘要 随着Internet的迅速发展，网络越来越成为了人们日常生活不可或缺的一部分，而随之引出的网络安全问题也越来越突出，成为人们不得不关注的问题。 为了在一个不安全的网际环境中构造出一个相对安全的环境，保证子网环境下的计算机…
阅读更多...
LeetCode | 110. 平衡二叉树

LeetCode | 110. 平衡二叉树

LeetCode | 110. 平衡二叉树 OJ链接 首先计算出二叉树的高度然后计算当前节点的左右子树的高度，然后判断当前节点的左右子树高度差是否超过 1，最后递归地检查左右子树是否也是平衡的。 //计算二叉树的高度 int height(struct TreeNode* root) {if(root…
阅读更多...
国标GB28181视频监控EasyCVR内网环境部署无法启动怎么办？

国标GB28181视频监控EasyCVR内网环境部署无法启动怎么办？

安防视频监控系统EasyCVR平台可拓展性强、视频能力灵活、部署轻快，可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等，以及支持厂家私有协议与SDK接入，包括海康Ehome、海大宇等设备的SDK等，能对外分发RTMP、RTSP、HTTP-FLV、…
阅读更多...
【Spring Cloud Alibaba】1.4 Nacos服务注册流程和原理解析

【Spring Cloud Alibaba】1.4 Nacos服务注册流程和原理解析

文章目录 1.前言2. 服务注册的基本流程3. 服务注册的核心代码分析3.1. NacosNamingServiceNamingProxy 服务端通信的核心类NamingClientProxy nacos 2.x 版本服务端通信核心接口 3.2 NamingGrpcClientProxy 详解RpcClient类RpcClient类核心方法 start 3.3 NamingHttpClientProx…
阅读更多...
ERROR: No matching distribution found for embreex

ERROR: No matching distribution found for embreex

因为要使用Trimesh中的光锥进行投射，在windows下正常安装embreex,但是切换到Ubuntu系统的时候却发现报错，起初以为是conda环境太过于古老，导致搜索不到。 所以，第一步先升级conda: conda update conda 或者 conda update -n ba…
阅读更多...
人才招聘信息网的设计与实现

人才招聘信息网的设计与实现

摘 要 随着经济的高速发展，人才的流动也越来越频繁，怎样才能用最少的精力和时间来招聘人才的企业要求相一致，也让应聘人参加应聘是企业和个人都关心的问题。 本网站采用基于广域网的B/S结构平台，比C/S有更强的适用范围&#xff0…
阅读更多...
【C++】简单的C++程序编译

【C++】简单的C++程序编译

一、简单的C程序 //prog.cc int main() {return 0; }二、编译 1. win11命令终端 cc prog.cc 2. win11 Visual Studio命令终端 cl /EHsc /W4 prog.cc 3. GNU编译器 g -Wall -o prog prog.cc 三、运行 1.win11 prog 2.Unix/Linux ./prog 四、查看返回值 1.win11 路…
阅读更多...
Android : 篮球记分器app _简单应用

Android : 篮球记分器app _简单应用

示例图： 1.导包 在build.gradle 中 加入 // 使用androidx版本库implementation androidx.lifecycle:lifecycle-extensions:2.1.0-alpha03 2. 开启dataBinding android{...// 步骤1.开启data bindingdataBinding {enabled true}...} 3.写个类继承 ViewModel pac…
阅读更多...
数字图像处理（实践篇）十八 人脸检测

数字图像处理（实践篇）十八 人脸检测

目录 一 使用opencv进行人脸检测 二 使用face_recognition进行人脸检测 一 使用opencv进行人脸检测 1 haarcascade_frontalface_default.xml 方法① 下载 地址：https://github.com/opencv/opencv/tree/master/data/haarcascades 点击haarcascade_frontalface_d…
阅读更多...
AI医疗交流平台【Docola】申请823万美元纳斯达克IPO上市

AI医疗交流平台【Docola】申请823万美元纳斯达克IPO上市

来源：猛兽财经 作者：猛兽财经 猛兽财经获悉，总部位于美国的AI医疗交流平台Docola近期已向美国证券交易委员会（SEC）提交招股书，申请在纳斯达克IPO上市，股票代码为 (DOCO) ，Docola计划…
阅读更多...
学生档案管理系统研究

学生档案管理系统研究

摘 要 学生档案管理系统是一个教育单位不可缺少的部分,它的内容对于学校的决策者和管理者来说都至关重要,所以学生档案管理系统应该能够为用户提供充足的信息和快捷的查询手段。但一直以来人们使用传统人工的方式管理文件档案，这种管理方式存在着许多缺点,如:效率低…
阅读更多...
容器重启后，Conda文件完整保存（虚拟环境、库包），如何重新安装conda并迁移之前的虚拟环境

容器重启后，Conda文件完整保存（虚拟环境、库包），如何重新安装conda并迁移之前的虚拟环境

Vim安装 容器重启后默认是vi，升级vim，执行命令 apt install -y vim安装 Anaconda 1. 下载Anaconda 其他版本请查看Anaconda官方库 wget https://mirrors.bfsu.edu.cn/anaconda/archive/Anaconda3-2023.03-1-Linux-x86_64.sh --no-check-certificate…
阅读更多...
黑马头条数据管理平台项目总结

黑马头条数据管理平台项目总结

今天主要看了该项目的介绍，这个黑马头条数据管理平台项目主要包括登录、用户的权限判断、文章内容列表的筛选和分页、文章的增删查改还有图片和富文本编辑器这几大部分组成，项目配套了素材代码，像资源文件、第三方插件、页面文件夹、工具插件…
阅读更多...
软磁材料市场分析：我国产量约18万吨

软磁材料市场分析：我国产量约18万吨

软磁材料，指的是当磁化发生在Hc不大于1000A/m，这样的材料称为软磁体。典型的软磁材料，可以用最小的外磁场实现最大的磁化强度。软磁材料(soft magnetic material)具有低矫顽力和高磁导率的磁性材料。 主要应用于风电、电子、计算机、通信、医…
阅读更多...
使用VBA快速创建日历表（时间维度表）

使用VBA快速创建日历表（时间维度表）

在数据统计分析中经常用到日历表，也有很多方法创建日历表，例如如下几篇博客分享如何使用Power Query创建日历表（相关链接参见本博文的最后部分）。 本次将要分享如何使用VBA创建如下格式的日历表，需要注意的是周次列&a…
阅读更多...
Java架构师技术架构路线

Java架构师技术架构路线

目录 1 概论2 如何规划短中长期的技术架构路线图3 如何规划面向未来的架构4 如何修订路线图执行过程中的偏差5 如何落地路线图-阿里系糙快猛之下的敏捷模式想学习架构师构建流程请跳转：Java架构师系统架构设计 1 概论 首先，规划一个短中长期的技术路线图是非常重要的。短中…
阅读更多...
回顾Django的第二天

回顾Django的第二天

1.http 1.1http请求协议与响应协议 1.1.1简介 http协议包含由浏览器发送数据到服务器需要遵循的请求协议与服务器发送数据到浏览器需要遵循的请求协议。用于HTTP协议交互的信被为HTTP报文。请求端(客户端)的HTTP报文 做请求报文,响应端(服务器端)的 做响应报文。HTTP报文本身…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023