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

2024-05-28 18:28

本文主要是介绍鸿蒙开发接口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)开发入门&实战教学视频》  

↑↑↑点击即可

这篇关于鸿蒙开发接口UI界面:【@ohos.router (页面路由)】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1011343

相关文章

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S

鸿蒙中Axios数据请求的封装和配置方法

《鸿蒙中Axios数据请求的封装和配置方法》:本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.配置权限 应用级权限和系统级权限2.配置网络请求的代码3.下载在Entry中 下载AxIOS4.封装Htt

鸿蒙中@State的原理使用详解(HarmonyOS 5)

《鸿蒙中@State的原理使用详解(HarmonyOS5)》@State是HarmonyOSArkTS框架中用于管理组件状态的核心装饰器,其核心作用是实现数据驱动UI的响应式编程模式,本文给大家介绍... 目录一、@State在鸿蒙中是做什么的?二、@Spythontate的基本原理1. 依赖关系的收集2.

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版:拆分成模块让模块更强大:使用 __init__.py你一定会遇到的问题模www.

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优