鸿蒙 HarmonyOS Next 路由 不废话 全干货

一、页面的创建

(1)直接通过创建一个新的Page的方式创建

(2)先创建一个 ArkTs File文件,然后在resources/base/profile/main_pages.json中加上页面对应的src路径,下面的Index_3.ets文件是通过创建ArkTs File文件生成的,需要加上src路径

加上路径后的显示:

二、路由 - 操作

首先导入:

复制代码
import router from 'ohos.router'

普通跳转(可以返回)

相当于栈,可以每次跳转都是入栈,每次返回都是出栈,页面栈的最大容量是32个页面

提示:页面地址是resources/base/profile/main_pages.json里的src地址

复制代码
router.pushUrl({
        url:'页面地址'
})

替换跳转(无法返回)

提示:页面地址是resources/base/profile/main_pages.json里的src地址

复制代码
router.replaceUrl({
        url:'页面地址'
})

返回

复制代码
router.back()

获取页面栈的长度

复制代码
router.getLength()

清空页面栈

复制代码
router.clear()

三、路由模式

两种路由模式:

Standard:无论之前是否使用过,一直添加到页面栈中(默认)

Single:如果目标页面已存在,会将已有的最近同url页面移到栈顶

路由模式的设置方式

在挑战页面的第二个参数设置路由模式

router.pushUrl(options,mode)

示例:

复制代码
router.pushUrl({
  url:'pages/Index_2'
},router.RouterMode.Single)

四、路由传参

传递参数的示例:

复制代码
router.pushUrl({
  url:'pages/Index_3',
  params: {
    username:this.username
  }
})

接受参数的示例:

复制代码
aboutToAppear():void{

  console.log(JSON.stringify(router.getParams()))
  const params = router.getParams() as 类型

  //例如,获取params中的username属性
  console.log('我的用户名是'+params.username)

}

五、demo演示

第一个页面:Index.ets (效果:跳转的到Index_2.ets页面)

复制代码
import router from '@ohos.router'

@Entry
@Component
struct Index {

  build(){
    Column() {
      Text('第一个页面')
        .fontSize(50)
        .onClick(()=>{
          router.pushUrl({
            url:'pages/Index_2'
          },router.RouterMode.Single)
        })

    }
  }
}

第二个页面:Index_2.ets(效果:跳转的到Index_3.ets页面,同时传递参数username)

复制代码
import router from '@ohos.router';

@Entry
@Component
struct Index_2 {
  @State username:string = 'csh'
  build(){
    Column() {
      Text('第二个页面')
        .fontSize(50)
        .onClick(()=>{
          router.pushUrl({
            url:'pages/Index_3',
            params: {
              username:this.username
            }
          })
        })
    }
  }
}

第三页面:Index_3.ets(效果:接收Index_2.ets页面传递来的参数并通过日志输出)

复制代码
import router from '@ohos.router';

interface ParamsObj{
  username:string
}

@Entry
@Component
struct Index_3 {

  aboutToAppear():void{

    console.log(JSON.stringify(router.getParams()))
    const params = router.getParams() as ParamsObj
    console.log('我的用户名是'+params.username)

  }

  build(){
    Column() {
      Text('第三个页面')
        .fontSize(50)

    }
  }
}
相关推荐
浪裡遊15 分钟前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
lzb_kkk1 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
好开心啊没烦恼1 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
简佐义的博客2 小时前
破解非模式物种GO/KEGG注释难题
开发语言·数据库·后端·oracle·golang
程序员爱钓鱼2 小时前
【无标题】Go语言中的反射机制 — 元编程技巧与注意事项
开发语言·qt
Frank学习路上2 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
2301_805054563 小时前
Python训练营打卡Day59(2025.7.3)
开发语言·python
lsx2024063 小时前
CSS 网页布局:从基础到进阶
开发语言
蜗牛沐雨3 小时前
警惕 Rust 字符串的性能陷阱:`chars().nth()` 的深坑与高效之道
开发语言·后端·rust