鸿蒙开发接口UI界面:【@ohos.router (页面路由)】

页面路由

icon-note.gif

 说明
开发前请熟悉鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

  • 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。
  • 页面路由需要在页面渲染完成之后才能调用,在onInit和onReady生命周期中页面还处于渲染阶段,禁止调用页面路由方法。

导入模块

import router from '@ohos.router'

权限列表

router.push

push(options: RouterOptions): void

跳转到应用内的指定页面。

系统能力:  SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
options[RouterOptions]跳转页面描述信息。

示例:

// 在当前页面中
export default {pushPage() {router.push({url: 'pages/routerpage2/routerpage2',params: {data1: 'message',data2: {data3: [123, 456, 789]},},});}
}
// 在routerpage2页面中
export default {data: {data1: 'default',data2: {data3: [1, 2, 3]}},onInit() {console.info('showData1:' + this.data1);console.info('showData3:' + this.data2.data3);}
}

router.replace

replace(options: RouterOptions): void

用应用内的某个页面替换当前页面,并销毁被替换的页面。

系统能力:  SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
options[RouterOptions]替换页面描述信息。

示例:

// 在当前页面中
export default {replacePage() {router.replace({url: 'pages/detail/detail',params: {data1: 'message',},});}
}
// 在detail页面中
export default {data: {data1: 'default'},onInit() {console.info('showData1:' + this.data1)}
}

router.back

back(options?: RouterOptions ): void

返回上一页面或指定的页面。

系统能力:  SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
options[RouterOptions]返回页面描述信息,其中参数url指路由跳转时会返回到指定url的界面,如果页面栈上没有url页面,则不响应该情况。如果url未设置,则返回上一页。

示例:

// index页面
export default {    indexPushPage() {        router.push({            url: 'pages/detail/detail',        });        }
}
// detail页面
export default {    detailPushPage() {        router.push({            url: 'pages/mall/mall',        });    }
}
// mall页面通过back,将返回detail页面
export default {    mallBackPage() {        router.back();    }
}
// detail页面通过back,将返回index页面
export default {    defaultBack() {        router.back();    }
}
// 通过back,返回到detail页面
export default {    backToDetail() {        router.back({uri:'pages/detail/detail'});    }
}

router.clear

clear(): void

清空页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。

系统能力:  SystemCapability.ArkUI.ArkUI.Full

示例:

export default {    clearPage() {        router.clear();    }
}js

router.getLength

getLength(): string

获取当前在页面栈内的页面数量。

系统能力:  SystemCapability.ArkUI.ArkUI.Full

返回值:

类型说明
string页面数量,页面栈支持最大数值是32。

示例:

export default {     getLength() {        var size = router.getLength();        console.log('pages stack size = ' + size);    }
}

router.getState

getState(): RouterState

获取当前页面的状态信息。

系统能力:  SystemCapability.ArkUI.ArkUI.Full

返回值:

类型说明
[RouterState]页面状态信息。

RouterState

页面状态信息。

系统能力:  以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。

名称类型说明
indexnumber表示当前页面在页面栈中的索引。 > ![icon-note.gif]说明: > 从栈底到栈顶,index从1开始递增。
namestring表示当前页面的名称,即对应文件名。
pathstring表示当前页面的路径。

示例:

export default {     getState() {        var page = router.getState();console.log('current index = ' + page.index);console.log('current name = ' + page.name);console.log('current path = ' + page.path);}
}

router.enableAlertBeforeBackPage

enableAlertBeforeBackPage(options: EnableAlertOptions): void

开启页面返回询问对话框。

系统能力:  SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
options[EnableAlertOptions]文本弹窗信息描述。

示例:

export default {    enableAlertBeforeBackPage() {        router.enableAlertBeforeBackPage({            message: 'Message Info',            success: function() {                console.log('success');            },            fail: function() {                console.log('fail');            },        });    }
}

EnableAlertOptions

页面返回询问对话框选项。

系统能力:  以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。

名称类型必填说明
messagestring询问对话框内容。

router.disableAlertBeforeBackPage

disableAlertBeforeBackPage(): void

禁用页面返回询问对话框。

系统能力:  SystemCapability.ArkUI.ArkUI.Full

示例:

export default {    disableAlertBeforeBackPage() {        router.disableAlertBeforeBackPage();    }
}

router.getParams

getParams(): Object

获取发起跳转的页面往当前页传入的参数。

系统能力:  SystemCapability.ArkUI.ArkUI.Full

返回值:

类型说明
Object发起跳转的页面往当前页传入的参数。

示例:

  • 类Web范示例

    // 在当前页面中
    export default {pushPage() {router.push({url: 'pages/detail/detail',params: {data1: 'message',},});}
    }
    // 在detail页面中
    export default {onInit() {console.info('showData1:' + router.getParams().data1);}
    }

  • 声明式示例

    //通过router.push跳转至目标页携带params参数
    import router from '@ohos.router'@Entry
    @Component
    struct Index {async  routePage() {let options = {url: 'pages/second',params: {text: '这是第一页的值',data: {array: [12, 45, 78]},}}try {await router.push(options)} catch (err) {console.info(` fail callback, code: ${err.code}, msg: ${err.msg}`)}}build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text('这是第一页').fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('next page').fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({ top: 20 }).backgroundColor('#ccc').onClick(() => {this.routePage()})}.width('100%').height('100%')}
    }
    //在second页面中接收传递过来的参数
    import router from '@ohos.router'@Entry
    @Component
    struct Second {private content: string = "这是第二页"@State text: string = router.getParams()['text']@State data: any = router.getParams()['data']@State secondData : string = ''build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text(`${this.content}`).fontSize(50).fontWeight(FontWeight.Bold)Text(this.text).fontSize(30).onClick(()=>{this.secondData = (this.data.array[1]).toString()}).margin({top:20})Text('第一页传来的数值' + '  ' + this.secondData).fontSize(20).margin({top:20}).backgroundColor('red')      }.width('100%').height('100%')}
    }

    搜狗高速浏览器截图20240326151344.png

    RouterOptions

    路由跳转选项。

    系统能力:  以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Lite。

    名称类型必填说明
    urlstring表示目标页面的uri,可以用以下两种格式: - 页面绝对路径,由配置文件中pages列表提供,例如:   - pages/index/index   - pages/detail/detail - 特殊值,如果uri的值是"/",则跳转到首页。
    paramsObject跳转时要同时传递到目标页面的数据,跳转到目标页面后,参数可以在页面中直接使用,如this.data1(data1为跳转时params参数中的key值)。如果目标页面中已有该字段,则其值会被传入的字段值覆盖。

    icon-note.gif

     说明:  页面路由栈支持的最大Page数量为32。

到这里我们就基本上学完了这个知识点,当然如果说要真正参与到鸿蒙的开发当中,要学的还有很多。大家可以看看下面这个鸿蒙入门到实战的学习技术路线图:

 而随着鸿蒙的火热,现阶段已有许多Android、前端等开发者看中其未来趋势;想从网上查阅学习,但搜索到的鸿蒙资料都是七零八碎的,对此为了避免大家在学习过程中浪费过多时间,特地根据鸿蒙官方发布文档结合华为内部人员的分享,经过反复修改整理得出:

整套鸿蒙(HarmonyOS NEXT)学习手册(共计1236页)与鸿蒙(HarmonyOS NEXT开发入门&实战教学视频(200集+)发放给大家。

内容包含了:(ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战)等技术知识点。帮助大家在学习鸿蒙路上少走弯路!下面点击↓↓↓拿

废话不多说,接下来好好看下这份资料。

《鸿蒙 (HarmonyOS NEXT)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

鸿蒙开发基础》

  1. ArkTS语言

  2. 安装DevEco Studio

  3. 运用你的第一个ArkTS应用

  4. ArkUI声明式UI开发

  5. .……

《鸿蒙开发进阶》

  1. Stage模型入门

  2. 网络管理

  3. 数据管理

  4. 电话服务

  5. 分布式应用开发

  6. 通知与窗口管理

  7. 多媒体技术

  8. 安全技能

  9. 任务管理

  10. WebGL

  11. 国际化开发

  12. 应用测试

  13. DFX面向未来设计

  14. 鸿蒙系统移植和裁剪定制

  15. ……

《鸿蒙开发实战》

  1. ArkTS实践

  2. UIAbility应用

  3. 网络案例

  4. ……

《鸿蒙 (HarmonyOS NEXT)开发入门&实战教学视频》  

↑↑↑点击即可

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI与空间设计的碰撞?

遇到难题不要怕!厚德提问大佬答! 厚德提问大佬答9 你是否对AI绘画感兴趣却无从下手?是否有很多疑问却苦于没有大佬解答带你飞?从此刻开始这些问题都将迎刃而解!你感兴趣的话题,厚德云替你问,你解…

探索python数据可视化的奥秘:打造专业绘图环境

新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一、搭建专业绘图环境 二、掌握绘图基本原理 三、解锁绘图高级技巧 四、总结与展望 在数据…

比较(一)利用python绘制条形图

比较(一)利用python绘制条形图 条形图(Barplot)简介 条形图主要用来比较不同类别间的数据差异,一条轴表示类别,另一条则表示对应的数值度量。 快速绘制 基于seaborn import seaborn as sns import matplo…

banner2.0自定义轮播布局

说明:最近碰到一个需求,让新闻列表实现轮播图的效果,也就是轮播新闻,然后样式必须按照ui设计的样式来弄,之前传统的banner,都是只轮播图片,没想到,这次居然要轮播新闻, 网…

MySQL 重启之后无法写入数据了?

数据库交接后因 persist_only 级别的参数设置引发的故障分析。 作者:不吃芫荽,爱可生华东交付服务部 DBA 成员,主要负责 MySQL 故障处理及相关技术支持。 爱可生开源社区出品,原创内容未经授权不得随意使用,转载请联系…

CentOS配置DNS

1.打开/etc/resolv.conf文件 sudo vi /etc/resolv.conf2.添加配置 nameserver 114.114.114.1143.保存并关闭文件。 4.为了确保配置生效,重启网络服务或重启系统。例如: 重启网络: sudo systemctl restart network重启系统: …

【渗透测试】|基于dvwa的CSRF初级,中级,高级

一、渗透测试 二、渗透测试过程中遇到的问题和解决 在初级csrf中&#xff0c;想要通过伪造一个404页面&#xff0c;达到修改密码的效果 伪造404页面的html代码如下&#xff1a; <html> <head> </head> <body> <img src"http://192.xx.xx.xx/…

mono3D任务FCOS3D: Fully Convolutional One-Stage Monocular 3D Object Detection

数据 KITTI 在卡尔斯鲁厄采集的数据&#xff0c;包括雷达&#xff08;64线束激光雷达&#xff09;和摄像头&#xff08;灰色彩色&#xff09;。目标为pvb,场景包括农村、城市、高速。3D目标检测任务包含7481 训练图片和7518 测试图片包含80.256 标注目标。同时带有点云信息。…

C++之类(class)的三种访问修饰符(public、private、protected)----成员变量与函数权限

1、背景介绍 在C中&#xff0c;类&#xff08;class&#xff09;的三种访问修饰符&#xff08;access specifiers&#xff09;用于控制类的成员&#xff08;属性和方法&#xff09;的访问权限。这些修饰符决定了类成员在类的外部是否可以被访问。以下是这三种访问修饰符的详细…

深度学习-语言模型

深度学习-语言模型 统计语言模型神经网络语言模型语言模型的应用序列模型&#xff08;Sequence Model&#xff09;语言模型&#xff08;Language Model&#xff09;序列模型和语言模型的区别 语言模型&#xff08;Language Model&#xff09;是自然语言处理&#xff08;NLP&…

信息安全法规和标准

《全国人民代表大会常务委员会关于维护互联网安全的决定》规定&#xff0c;威胁互联网运行安全的行为&#xff1a;&#xff08;1&#xff09;侵入国家事务、国防建设、尖端科学技术领域的计算机信息系统&#xff0c;&#xff08;2&#xff09;故意制作、传播计算机病毒等破坏性…

Java 中BigDecimal传到前端后精度丢失问题

1.用postman访问接口&#xff0c;返回的小数点精度正常 2.返回到页面里的&#xff0c;小数点丢失 3.解决办法&#xff0c;在字段上加注解 JsonFormat(shape JsonFormat.Shape.STRING) 或者 JsonSerialize(using ToStringSerializer.class) import com.fasterxml.jackson.a…

SpringJDBC

1.前言 Spring JDBC可以帮助开发者节省大量开发工作 自动去处理一些低级细节 比如&#xff1a;异常处理、打开和关闭资源(Connection、PreparedStatement、Statement、ResultSet) 需要下载的jar包&#xff1a; spring-jdbc(普通jar包、源码jar包)由于没有依赖其他的jar包 所以只…

Echarts 实现线条绘制

文章目录 需求分析 需求 用 Echarts 实现如下效果 分析

【优选算法】分治 {三分快排:三指针优化,随机选key,快速选择算法;归并排序:统计数组中的逆序对,统计数组中的翻转对;相关编程题解析}

一、经验总结 1.1 三分快排 优化一&#xff1a;三指针优化 之前学习的快速排序无法妥善处理相等或重复序列的排序问题&#xff08;有序且三数取中无效&#xff09;&#xff0c;使快速排序的效率无法达到最优。 为了解决重复序列的问题&#xff0c;我们将原先的双指针法&…

云计算-无服务器计算与AWS Lambda (Serverless Computing with AWS Lambda)

AWS Lambda 无服务器计算与AWS Lambda AWS Lambda支持无服务器计算&#xff0c;不需要任何预配置和管理&#xff0c;同时还能最大限度地降低成本。我们将看到如何创建一个简单的Lambda函数&#xff0c;以及如何将其与AWS事件映射。在现实生活中&#xff0c;任何托管在线的应用…

每天学点小知识:图床搭建 + CDN简介

前言&#xff1a; 本章内容帮你解决&#xff0c;本地图片不能分享到网上的问题。需要工具github JSDelivr 知识点 Q&#xff1a;什么是JSDelivr&#xff1f; JSDelivr是一个免费且公开的内容分发网络&#xff08;CDN&#xff09;&#xff0c;专门用于加速开源项目和静态网站…

构建php环境、安装、依赖、nginx配置、ab压力测试命令、添加php-fpm为系统服务

目录 php简介 官网php安装包 选择下载稳定版本 &#xff08;建议使用此版本&#xff0c;文章以此版本为例&#xff09; 安装php解析环境 准备工作 安装依赖 zlib-devel 和 libxml2-devel包。 安装扩展工具库 安装 libmcrypt 安装 mhash 安装mcrypt 安装php 选项含…

2024年软件设计师备考复习资料(应用技术)

应用设计&#xff0c;考试时间为120分钟&#xff1b;总共需做5道题&#xff0c;满分75分&#xff08;每题15分&#xff09;。前4题为必答题&#xff0c;最后2题为要求选答一题&#xff08;C或Java&#xff09;&#xff0c;45及格 目录 1. 数据流图&#xff08;需求分析&#…

Python使用Modbus RTU发送数据的技术性指南

目录 一、引言 二、Modbus RTU协议简介 三、Pymodbus库介绍 四、环境准备 五、编写Modbus RTU客户端代码 六、案例分析 七、注意事项与调试技巧 八、扩展功能与应用 九、性能优化与安全性考虑 十、总结 一、引言 在工业自动化领域中&#xff0c;Modbus协议因其开放性…