XXMI启动器：让游戏模组管理变得如此简单
2025/12/22 18:39:28
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-router-V5
路由简介：
普通用户：网址 开发人员：域名 =》延伸知识点 域名价格 65左右、域名后缀 com商业/cn中国/net网络供应商/edu教育/org非营利性/it意大利 鸿蒙里面：路由
路由/网址/域名组成
协议://域名:端口/路径?参数名=数据&...&参数名=数据 http://baidu.com:80/login?参数名=数据&...&参数名=数据
路径作用：显示不同的页面（布局结构不一样、数据都不同）
参数作用：显示不同的数据（布局结构一样、数据不同）
留 心：路径后面一般是参数，有n种方式，一般分为两种 传参1：协议://域名:端口/路径?参数名=值&....&参数名=值 【query传参/get方式传参】 传参2：协议://域名:端口/路径/参数1/.../参数n 【params传参】 http://baidu.com/user/12 /user/:id 定义路由的去规定了 http://baidu.com/user?id=1
1.1 路由配置
resource/base/profile/main_pages.json
{ "src": [ "pages/Index", "pages/Cart", "pages/Detail" ] }细节1：路由配置在json文件中 所以必须写 双引号，数组的最后一个不能写逗号
细节2：咱们后面写代码目录统一小写，组件名大写
1.2 页面跳转
页面栈的最大容量为32个页面。如果超过这个限制，可以调用router.clear()方法清空历史页面栈，释放内存空间。
Router模块提供了两种跳转模式，分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页是否会替换当前页
router.pushUrl()
目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页
// 引入路由模块 import router from '@ohos.router' @Entry @Component struct LearnRouter1 { @State message: string = 'Hello World' build() { Row() { Column() { Button('跳转到页面2').onClick(() => { router.pushUrl({ // /** * 目标url 和 src/main/resources/base/profile/main_pages.json * 目录地址一致 */ url: 'pages/LearnRouter2' }) }) } .width('100%') } .height('100%') } }router.replaceUrl()
目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。
// 引入路由模块 import router from '@ohos.router' @Entry @Component struct LearnRouter1 { @State message: string = 'Hello World' build() { Row() { Column() { Button('替换到页面2').onClick(() => { router.replaceUrl({ // /** * 目标url 和 src/main/resources/base/profile/main_pages.json * 目录地址一致 */ url: 'pages/LearnRouter2' }) }) } .width('100%') } .height('100%') } }1.3 路由传参
使用params对象传参
// 引入路由模块 import router from '@ohos.router' @Entry @Component struct LearnRouter1 { @State message: string = 'Hello World' build() { Row() { Column() { Button('替换到页面2').onClick(() => { /** * pushUrl接收第二个参数 * 跳转模式 */ router.pushUrl({ // /** * 目标url 和 src/main/resources/base/profile/main_pages.json * 目录地址一致 */ url: 'pages/LearnRouter2', // 使用params对象传参 params: { name: "张三", age: 20 } // 标准实例模式 // }, router.RouterMode.Standard) // 单例模式 }, router.RouterMode.Single) }) } .width('100%') } .height('100%') } }接收参数
import router from '@ohos.router' @Entry @Component struct LearnRouter2 { @State message: string = 'Hello World' build() { Row() { Column() { Button('获取参数').onClick(() => { const params = router.getParams() console.log(JSON.stringify(params)) }) } .width('100%') } .height('100%') } } import router from '@ohos.router' interface RouterParams { content: string } @Entry @Component struct Other { // created onLoad aboutToAppear // mounted onReady aboutToAppear() { const parmas = router.getParams() as RouterParams console.log(JSON.stringify(parmas)) console.log(parmas.content) } build() { Column() { Text('hello2') Button('返回').onClick((event: ClickEvent) => { router.showAlertBeforeBackPage({ message: '您还没有完成支付，确定要返回吗？' // 设置询问框的内容 }); router.back() }) Button('获取参数').onClick((event: ClickEvent) => { const parmas = router.getParams() console.log(JSON.stringify(parmas)) }) } } } 1.4 页面返回前增加一个询问框
系统默认询问框
import router from '@ohos.router' @Entry @Component struct LearnRouter2 { @State message: string = 'Hello World' build() { Row() { Column() { Button('获取参数').onClick(() => { const params = router.getParams() console.log(JSON.stringify(params)) }) Button('返回上一页').onClick(() => { /** * 使用showAlertBeforeBackPage * 在跳转前弹框提示 */ router.showAlertBeforeBackPage({ message: '您还没有完成支付，确定要返回吗？' // 设置询问框的内容 }); // 返回上一页，在返回之前会拦截弹框提示 router.back() }) } .width('100%') } .height('100%') } }自定义询问框
import router from '@ohos.router' import promptAction from '@ohos.promptAction' @Entry @Component struct LearnRouter2 { @State message: string = 'Hello World' build() { Row() { Column() { Button('获取参数').onClick(() => { const params = router.getParams() console.log(JSON.stringify(params)) }) Button('返回上一页').onClick(async () => { // 创建并显示对话框，对话框响应后同步返回结果。 const result = await promptAction.showDialog({ // 内容 message: '您还没有完成支付，确定要返回吗？', // 按钮 buttons: [ { text: '取消', color: '#FF0000' }, { text: '确认', color: '#0099FF' } ] }) if (result.index === 0) { // 用户点击了“取消”按钮 console.info('User canceled the operation.'); } else if (result.index === 1) { // 用户点击了“确认”按钮 console.info('User confirmed the operation.'); // 调用router.back()方法，返回上一个页面 router.back(); } }) } .width('100%') } .height('100%') } }1.5 实例模式
需要页面栈只有一份 就单实例 否则默认
需要返回pushUrl 否则 replaceUrl
Standard
标准实例模式，也是默认情况下的实例模式。每次调用该方法都会新建一个目标页，并压入栈顶
Single
单实例模式。即如果目标页的url在页面栈中已经存在同url页面，则离栈顶最近的同url页面会被移动到栈顶，并重新加载；如果目标页的url在页面栈中不存在同url页面，则按照标准模式跳转。
// 引入路由模块 import router from '@ohos.router' @Entry @Component struct LearnRouter1 { @State message: string = 'Hello World' build() { Row() { Column() { Button('替换到页面2').onClick(() => { /** * pushUrl接收第二个参数 * 跳转模式 */ router.pushUrl({ // /** * 目标url 和 src/main/resources/base/profile/main_pages.json * 目录地址一致 */ url: 'pages/LearnRouter2' // 标准实例模式 // }, router.RouterMode.Standard) // 单例模式 }, router.RouterMode.Single, (err) => { // 跳转后的回调 if (err) { // 跳转失败 console.log(err,'错误信息') return } console.log("跳转成功") }) }) } .width('100%') } .height('100%') } }1.6 Navigator路由容器组件
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-navigator-V5
可以简单理解为传统的声明式导航 而router则是编程式导航
路由容器组件，提供路由跳转能力。
Navigator({target:"路由跳转的页面",type:NavigationType})target 跳转的路由页面
type NavigationType.Push 添加路由历史 NavigationType.Back 回退 NavigationType.Replace 替换跳转路由历史
普通跳转
在这里Navigator是一个容器，可以在里面放入对应的所有内容
@Entry @Component struct Index { build() { Column(){ Navigator({target:"pages/page1",type:NavigationType.Push}){ Row(){ Button("按钮1"); Text("文本内容1") } } Navigator({target:"pages/page2",type:NavigationType.Push}){ Row(){ Button("按钮1"); Text("文本内容1") } } } } }传参
传参使用params(参数)
@Entry @Component struct Index { msg:string="你好"; build() { Column(){ Navigator({target:"pages/page1",type:NavigationType.Push}){ Text("文本内容") }.params({msg:this.msg}) } } }我们仍可以使用router.getParams()获取到传递来的参数
import { router } from '@kit.ArkUI' interface IMsg{ msg:string } @Entry @Component struct Page1{ build() { Row(){ Text((router.getParams() as IMsg).msg) Navigator({ target: 'pages/Index', type: NavigationType.Back }) { Image($rawfile("img_30.JPG")).width('100%').height('100%') // 图片存放在media文件夹下 } } } }激活模式 了解
import { router } from '@kit.ArkUI'; interface IData{ bool:boolean; } @Entry @Component struct Index { @State nav1Bool:boolean=false; @State nav1Boo2:boolean=false; build() { Column(){ Navigator({target:"pages/page1",type:NavigationType.Push}){ Text("文本内容") }.active(this.nav1Bool) Button("按钮").onClick(()=>{ this.nav1Bool=true; }) } } onPageShow(): void { const data:IData=router.getParams() as IData; if(data) this.nav1Bool=data.bool || false; } }@Entry @Component struct Page1{ build() { Navigator({ target: 'pages/Index', type: NavigationType.Back }) { Image($rawfile("img_30.JPG")).width('100%').height('100%') // 图片存放在media文件夹下 }.params({bool:false}) } }1.7 知识点小结
路由简介：路由就是用来跳转页面的 从而展示不同的.ets组件，在ets同级resources/base/profile/main_pages.json
跳转模式、路由传参、返回询问可
pushUrl/replaceUrl({ url params: {} })实例模式（路由模式）
标准的 standard
Single 单实例
明确要页面站只有一个 Single 明确要返回的pushUrl
Navigator组件（声明式导航） Navigator({ target,type }){ 文本 } .params()
欢迎加入课程班级，考取鸿蒙认证：
https://developer.huawei.com/consumer/cn/training/classDetail/d43582bb30b34f548c16c127cb3be104?type=1?ha_source=hmosclass&ha_sourceId=89000248