鸿蒙Harmony-页面路由（router）详解

已于 2024-06-23 15:02:58 修改
阅读量3.9k 收藏 26
点赞数 33
分类专栏： 鸿蒙开发 文章标签： harmonyos java 华为 harmony 鸿蒙 android
于 2024-01-17 21:39:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y2653904/article/details/135658811
版权

慢慢理解世界，慢慢更新自己，希望你的每一个昨天，今天，和明天都会很快乐，你知道的，先好起来的从来都不是生活，而是你自己 

目录

 

一，定义

二，页面跳转

2.1使用router.pushUrl

2.2 使用router.replaceUrl

2.3 使用Single模式

2.4 带参数的跳转

 三，页面返回

 3.1返回到上一个页面

3.2 返回到指定页面

3.3返回到指定页面，并传递自定义参数信息

 四，页面返回前增加一个询问框

4.1系统默认询问框

4.2 自定义询问框

 

 

一，定义

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。

Router适用于模块间与模块内页面切换，通过每个页面的url实现模块间解耦。模块内页面跳转时，为了实现更好的转场动效场景不建议使用该模块，推荐使用Navigation。

 

二，页面跳转

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

Router模块提供了两种跳转模式，分别是router.poshUrl()和router.replaceUrl()。这两种模式决定了目标页面是否会替换当前页。

router.pushUrl()：目标页面不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页。

router.replaceUrl()：目标页面会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

 ！注意：页面栈的最大容量为32个页面。如果超过这个限制，可以调用router.clear()方法清空历史页面栈，释放内存空间。

同时，Router模块提供了两种实例模式，分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。

Standard：多实例模式，也是默认情况下的跳转模式。目标页面会被添加到页面栈顶，无论栈中是否存在相同url的页面。

Single：单实例模式。如果目标页面的url已经存在于页面栈中，则会将离栈顶最近的同url页面移动到栈顶，该页面成为新建页。如果目标页面的url在页面栈中不存在同url页面，则按照默认的多实例模式进行跳转。

2.1使用router.pushUrl

1，添加页面路径

{
  "src": [
    "pages/Index",
    "pages/FirstPage",
    "pages/SecondPage"
  ]
}

2，编写第一个页面

import router from '@ohos.router'

@Entry
@Component
struct FirstPage {

  aboutToAppear(){
    console.error("yz---aboutToAppear")
  }

  onPageShow(){
    console.error("yz---onPageShow")
  }

  onBackPress(){
    console.error("yz---onBackPress")
  }

  aboutToDisappear(){
    console.error("yz---aboutToDisappear")
  }

  onPageHide(){
    console.error("yz---onPageHide")
  }

  onDestroy(){
    console.error("yz---onDestroy")
  }

  build() {
    Column() {
      Text("第一页")
      Text("跳转下一页").width("50%").height("30%")
        .onClick(()=>{
          router.pushUrl({ url: "pages/SecondPage"})
        })
    }.width("100%").height("100%")
  }
}

3，编写第二个页面

import router from '@ohos.router'

@Entry
@Component
struct SecondPage {

 
  build() {
    Column() {
      Text("第二页")
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          router.pushUrl({ url: "pages/FirstPage"})
        })
    }.width("100%").height("100%")
  }
}

运行：

bbaf31a400364f7c94c9e82d6d01ca32.png点击下一页af14bee005634856b9749c4884360a03.png

日志：

d95c13f233e3418d905803bc997d2ea6.png

2.2 使用router.replaceUrl

import router from '@ohos.router'

@Entry
@Component
struct FirstPage {

  aboutToAppear(){
    console.error("yz---aboutToAppear")
  }

  onPageShow(){
    console.error("yz---onPageShow")
  }

  onBackPress(){
    console.error("yz---onBackPress")
  }

  aboutToDisappear(){
    console.error("yz---aboutToDisappear")
  }

  onPageHide(){
    console.error("yz---onPageHide")
  }

  onDestroy(){
    console.error("yz---onDestroy")
  }

  build() {
    Column() {
      Text("第一页")
      Text("跳转下一页").width("50%").height("30%")
        .onClick(()=>{
          router.replaceUrl({ url: "pages/SecondPage"})
        })
    }.width("100%").height("100%")
  }
}

日志输出：

a66d4deb68e14d1cabc8df6aff94fe60.png

2.3 使用Single模式

import router from '@ohos.router'

@Entry
@Component
struct FirstPage {

  aboutToAppear(){
    console.error("yz---aboutToAppear")
  }

  onPageShow(){
    console.error("yz---onPageShow")
  }

  onBackPress(){
    console.error("yz---onBackPress")
  }

  aboutToDisappear(){
    console.error("yz---aboutToDisappear")
  }

  onPageHide(){
    console.error("yz---onPageHide")
  }

  onDestroy(){
    console.error("yz---onDestroy")
  }

  build() {
    Column() {
      Text("第一页")
      Text("跳转下一页").width("50%").height("30%")
        .onClick(()=>{
          router.pushUrl({ url: "pages/SecondPage"},router.RouterMode.Single)
        })
    }.width("100%").height("100%")
  }
}

运行输出：

1fd342a2c3934e0da8ce591e0823fb4f.png

2.4 带参数的跳转

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

1，定义一个data类：

import YuanZhen from './YuanZhen';

export default class Data {
  id: number = 0;
  info: YuanZhen|null = null;

  constructor(id: number, info: YuanZhen) {
    this.id = id;
    this.info = info;
  }
}

2，在第一页传递参数，跳转下一页

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct FirstPage {

  @State yuanZhen:YuanZhen =new YuanZhen("袁震",18)

  aboutToAppear(){
    console.error("yz---aboutToAppear")
  }

  onPageShow(){
    console.error("yz---onPageShow")
  }

  onBackPress(){
    console.error("yz---onBackPress")
  }

  aboutToDisappear(){
    console.error("yz---aboutToDisappear")
  }

  onPageHide(){
    console.error("yz---onPageHide")
  }

  onDestroy(){
    console.error("yz---onDestroy")
  }

  build() {
    Column() {
      Text("第一页")
      Text("跳转下一页").width("50%").height("30%")
        .onClick(()=>{
          router.pushUrl({ url: "pages/SecondPage", params: new Data(222,this.yuanZhen)},router.RouterMode.Single)
        })
    }.width("100%").height("100%")
  }
}

3，在第二页接收第一页的参数并展示

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct SecondPage {
  yuanZhen : YuanZhen =new YuanZhen("袁震2",10)
  aboutToAppear(){
    let params:Data  =router.getParams() as Data
    this.yuanZhen =params.info as YuanZhen
  }

  build() {
    Column() {
      Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          router.replaceUrl({ url: "pages/FirstPage"})
        })
    }.width("100%").height("100%")
  }
}

跳转到第二页后展示第一页传过来的数据 

ee5cb2aec81241639fbcb43eee8092a5.png

 三，页面返回

当用户在一个页面完成操作后，通常需要返回到上一个页面或者指定页面，这就需要用到页面返回功能。在返回的过程中，可能需要将数据传递给目标页面，这就需要用到数据传递功能。

 3.1返回到上一个页面

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct SecondPage {
  yuanZhen : YuanZhen =new YuanZhen("袁震2",10)
  aboutToAppear(){
    let params:Data  =router.getParams() as Data
    this.yuanZhen =params.info as YuanZhen
  }

  build() {
    Column() {
      Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          router.back()
        })
    }.width("100%").height("100%")
  }
}

3.2 返回到指定页面

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct SecondPage {
  yuanZhen : YuanZhen =new YuanZhen("袁震2",10)
  aboutToAppear(){
    let params:Data  =router.getParams() as Data
    this.yuanZhen =params.info as YuanZhen
  }

  build() {
    Column() {
      Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          router.back({url:'pages/FirstPage'})
        })
    }.width("100%").height("100%")
  }
}

3.3返回到指定页面，并传递自定义参数信息

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct SecondPage {
  yuanZhen : YuanZhen =new YuanZhen("袁震2",10)
  aboutToAppear(){
    let params:Data  =router.getParams() as Data
    this.yuanZhen =params.info as YuanZhen
  }

  build() {
    Column() {
      Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          router.back({
            url:'pages/FirstPage',
            params: {
            info: '来自第二页'
          }})
        })
    }.width("100%").height("100%")
  }
}

这种方式不仅可以返回到指定页面，还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页面中通过调用router.getParams()方法进行获取和解析。

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

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct FirstPage {

  @State yuanZhen:YuanZhen =new YuanZhen("袁震",18)

  aboutToAppear(){
    console.error("yz---aboutToAppear")
  }

  onPageShow(){
    console.error("yz---onPageShow:"+JSON.stringify(router.getParams()))
  }

  onBackPress(){
    console.error("yz---onBackPress")
  }

  aboutToDisappear(){
    console.error("yz---aboutToDisappear")
  }

  onPageHide(){
    console.error("yz---onPageHide")
  }

  onDestroy(){
    console.error("yz---onDestroy")
  }

  build() {
    Column() {
      Text("第一页")
      Text("跳转下一页").width("50%").height("30%")
        .onClick(()=>{
          router.pushUrl({ url: "pages/SecondPage", params: new Data(222,this.yuanZhen)},router.RouterMode.Single)
        })
    }.width("100%").height("100%")
  }
}

输出：

d331d1bebaa8441daf456a94c6661ae2.png

 注意：

当使用router.back()方法返回到指定页面时，原栈顶页面（包括）到指定页面（不包括）之间的所有页面栈都将从栈中弹出并销毁。

另外，如果使用router.back()方法返回到原来的页面，原页面不会被重复创建，因此使用@State声明的变量不会重复声明，也不会触发页面的aboutToAppear()生命周期回调。如果需要在原页面中使用返回页面传递的自定义参数，可以在需要的位置进行参数解析。例如，在onPageShow()生命周期回调中进行参数解析。

 四，页面返回前增加一个询问框

在开发应用时，为了避免用户误操作或者丢失数据，有时候需要在用户从一个页面返回到另一个页面之前，弹出一个询问框，让用户确认是否要执行这个操作。

4.1系统默认询问框

为了实现这个功能，可以使用页面路由Router模块提供的两个方法：router.showAlertBeforeBackPage()和router.back()来实现这个功能。

如果想要在目标界面开启页面返回询问框，需要在调用router.back()方法之前，通过调用router.showAlertBeforeBackPage()方法设置返回询问框的信息

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct SecondPage {
  yuanZhen : YuanZhen =new YuanZhen("袁震2",10)
  aboutToAppear(){
    let params:Data  =router.getParams() as Data
    this.yuanZhen =params.info as YuanZhen
  }

  build() {
    Column() {
      Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          router.showAlertBeforeBackPage({message:"确认退出吗？"})
          router.back({
            url:'pages/FirstPage',
            params: {
            info: '来自第二页'
          }})
        })
    }.width("100%").height("100%")
  }
}

 284d97b2ad184dd994d4d63963d1baa2.png

4.2 自定义询问框

自定义询问框的方式，可以使用弹窗或者自定义弹窗实现。这样可以让应用界面与系统默认询问框有所区别，提高应用的用户体验度。

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'
import promptAction from '@ohos.promptAction'

@Entry
@Component
struct SecondPage {
  yuanZhen : YuanZhen =new YuanZhen("袁震2",10)
  aboutToAppear(){
    let params:Data  =router.getParams() as Data
    this.yuanZhen =params.info as YuanZhen
  }

  build() {
    Column() {
      Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          promptAction.showDialog({message:"您确认退出吗",buttons:[{text:"不确认",color:"#232"},{text:"确认",color:"#262"}]})
            .then((result:promptAction.ShowDialogSuccessResponse)=>{
              if(result.index==0){
                // 用户点击了“取消”按钮
              }else if(result.index==1){
                router.back()
              }
            })
            .catch((error:Error)=>{
              console.error("yz----返回错误")
            })


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

42bffe1c7ee54fd7af424e0cd4ebb5af.png

 

 

 

袁震
关注
  • 33
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
深入解析鸿蒙系统的页面路由（Router）机制，【原理+实战+视频+源码
2401_84181577的博客
04-18 284
router.pushUrl({ url: ‘pages/HomePage’, params: { msg: ‘hello world，我是上一个页面传递过来的’ } },// 调用router.showAlertBeforeBackPage()方法，设置返回询问框的信息。Button(‘返回上一页’).onClick(() => {// 调用router.back()方法，返回上一个页面。Button(‘页面返回询问框自定义’)Button(‘页面返回询问框’)Button(‘返回指定页面’)
鸿蒙HarmonyOS教程-路由管理（Router）【入门篇】_鸿蒙 pushnamedroute(1)
2401_84182146的博客
04-14 863
params: {info: '来自Home页'});多HAP机制。
鸿蒙HarmonyOS教程-路由管理（Router）【入门篇】
shudaoshanQAQ的博客
01-12 3289
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。
Harmony OS—UIAbility的使用
11-07 1605
UIAbility是一种包含用户界面的应用组件，主要用于和用户进行交互。UIAbility也是系统调度的单元，为应用提供窗口在其中绘制界面。一个应用可以有一个UIAbility，也可以有多个UIAbility，类似于Android 的 Activity，如果有安卓基础的同学，也可以结合过往知识点学习。比如。
鸿蒙HarmonyOS 角落里的知识—路由管理（Router）
m0_64422261的博客
06-20 1191
Router模块提供了两种跳转模式
梅科尔工作室-张宇-鸿蒙笔记四
m0_63325230的博客
06-18 655
一、官方API使用首先需要找到想要使用的API文档。在基础文档里位置如下。找到之后，查看文档中关于此接口的说明，查看使用方法和使用案例后即可使用。
this.$router.push(),路由传值 跳转到不同的url地址
爬楼梯的前端小白的博客
03-07 1448
this.$router.push(),路由传值 跳转到不同的url地址
梅科尔工作室-刘晨-鸿蒙笔记4
weixin_73756394的博客
02-07 1366
方式四：API9及以上，router.replace()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard标准模式。方式二：API9及以上，router.push()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard标准模式。// 填写http请求的url地址，可以带参数也可以不带参数。
鸿蒙HarmonyOS教程-路由管理（Router）【入门篇】_鸿蒙 pushnamedroute
2401_84164576的博客
04-12 1802
params: {info: '来自Home页'});多HAP机制。
HarmonyOS开发-路由组件体验
04-12
### HarmonyOS开发-路由组件体验 #### 路由框架简介 HarmonyOS作为华为推出的一款面向全场景的分布式操作系统，其开发过程中涉及到多种复杂的页面跳转与数据传递需求。为了简化这一过程，并提高开发效率及应用性能...
鸿蒙HarmonyOS深度探索课程-课程网盘链接提取码下载 .txt
最新发布
06-27
在这门课程中，我们将深入探索鸿蒙HarmonyOS平台的Java UI布局技术，结合新浪新闻、直聘App和华为商城等三个经典案例，从布局设计到实现细节，从交互体验到用户界面优化，逐步解析其UI布局的全面技术与设计思路。...
HarmonyOS鸿蒙-DevEco Studio工具
06-05
鸿蒙开发编译器
华为鸿蒙HarmonyOS开发整理资料汇总.zip
11-25
华为鸿蒙HarmonyOS开发整理资料汇总，共38份。 1学前必读：HarmonyOS学习资源主题分享 2学前必读：OpenHarmony-联盟生态资料合集 3-1.HarmonyOS概述：技术特性 3-2.HarmonyOS概述：开发工具与平台 3-3.HarmonyOS...
HarmonyOS-ArkTS-待办列表源码
12-21
ArkTS语法：ArkTS是HarmonyOS的主要应用开发语言。ArkTS基于TypeScript（简称TS）语言扩展而来，是TS的超集。 Text组件：显示一段文本的组件。 Column组件：沿垂直方向布局的容器。 Row组件：沿水平方向布局的容器。
【鸿蒙（HarmonyOS）】Router（路由）、CustomDialog（弹窗）、Popup（气泡提示）和setTimeout（定时服务）的使用（以登录模块为例）
守夜人
09-18 1598
Popup（气泡提示）：可绑定在组件上显示气泡弹窗提示，设置弹窗内容、交互逻辑和显示状态。CustomDialog（弹窗）：可用于广告、中奖、警告、软件更新等与用户交互响应操作。，主攻前端的小伙伴肯定不陌生，科班学习的小伙伴多少也有印象，这里我就简单讲一下。setTimeout（定时器）：指定多久后（ms）完成方法（function）关于布局构建，可以参考同栏目中的文章，以下是大致的布局，后面再完善。Router（路由）：在应用程序中实现不同页面之间的跳转和数据传递。第二步：跳转并传递数值。
【鸿蒙 HarmonyOS】路由router
weixin_71403100的博客
02-22 3008
这种方式不仅可以返回到指定页面，还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页中通过调用router.getParams()方法进行获取和解析。// 获取传递过来的参数对象// 获取id属性的值@Entry@Componentbuild() {Row() {Text('接收login传递的id：' + this.params.id)Button('返回到login页面')message:'确定返回到login页面吗？',
深入解析鸿蒙系统的页面路由（Router）机制
maniuT的博客
02-17 1698
鸿蒙系统以其独特的分布式架构和跨设备的统一体验而备受瞩目。在这个系统中，页面路由（Router）机制是连接应用各页面的关键组成部分。本文将深入探讨鸿蒙系统的页面路由，揭示其工作原理、特点以及在应用开发中的实际应用。
鸿蒙页面路由（router）的跳转模式
weixin_63448554的博客
12-29 691
大家好我是海岛，分享一下在传智博学谷学习的一些知识技术。页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。本文将从和几个方面介绍Router模块提供的功能。
router.push()方法的介绍及其使用
ONLYSRY的博客
06-01 2441
如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。
鸿蒙harmonyos登录页面
05-16
鸿蒙（HarmonyOS）的登录页面与其他操作系统的登录页面类似，通常包括以下元素： 1. 用户名或邮箱：用户需要输入自己的用户名或者邮箱地址。 2. 密码：用户需要输入与其账号对应的密码，以保证账号安全。 3. 登录按钮：用户在输入完用户名和密码后，需要点击“登录”按钮进行登录。 4. 注册链接：如果用户还没有账号，登录页面通常会提供一个注册链接，用户可以通过链接进入注册页面进行注册。 5. 忘记密码链接：如果用户忘记了密码，登录页面通常会提供一个“忘记密码”链接，用户可以通过链接进行密码重置。 需要注意的是，不同的设备和应用可能会有不同的登录页面设计，但是一般都会包括上述元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

袁震

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值