路由跳转示例

发布时间:2026/6/30 14:28:05
路由跳转示例 一、路由 Routerohos.router原理说明Router 是全局页面栈每个Entry修饰的.ets文件是独立页面通过文件路径url跳转支持页面传参、返回、替换页面、清空栈。常用 API方法作用pushUrl()入栈跳转保留当前页可返回back()返回上一页支持带回参数replaceUrl()替换当前页面不保留上一页clear()清空整个页面栈getParams()获取跳转传递的参数二、完整代码示例步骤 1创建两个页面首页pages/Index.ets入口页目标页pages/Detail.ets跳转后的页面① Index.ets发起跳转页面arkts// 导入路由模块import router from ohos.router;EntryComponentstruct Index {build() {Column() {Text(首页 Router跳转演示).fontSize(26).margin({ bottom: 30 })// 1. 基础无参跳转Button(无参跳转到详情页).width(220).margin(10).onClick(() {router.pushUrl({url: pages/Detail // 目标页面文件路径})})// 2. 带参数跳转对象传参Button(带参数跳转到详情页).width(220).margin(10).onClick(() {// 自定义传递参数let sendData {id: 1001,title: 鸿蒙组件教程,list: [轮播图, 按钮, Toggle]}router.pushUrl({url: pages/Detail,params: sendData // params传递数据})})// 3. 替换当前页面无法返回Button(替换页面replace).width(220).margin(10).onClick(() {router.replaceUrl({ url: pages/Detail })})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}② Detail.ets接收参数、返回页面import router from ohos.router; Entry Component struct Detail { // 接收跳转参数 State pageData: Recordstring, Object {} aboutToAppear() { // 页面加载时获取路由传参 this.pageData router.getParams() as Recordstring, Object console.info(接收参数, JSON.stringify(this.pageData)) } build() { Column() { Text(详情页面) .fontSize(26) .margin({ bottom: 20 }) Text(接收ID${this.pageData.id ?? 无数据}) Text(标题${this.pageData.title ?? 无数据}) Button(返回上一页带回参数) .margin(20) .onClick(() { // back返回时可以回传参数给首页 router.back({ params: { result: 操作成功, time: new Date().getTime() } }) }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }3. 配置说明必须配置打开src/main/module.json5确认 pages 数组注册两个页面{ module: { pages: [ pages/Index, pages/Detail ], // ...其他配置省略 } }三、 Router 优缺点✅ 优点上手简单、独立页面隔离、适合小型单功能应用❌ 缺点页面栈全局管理、无法局部导航、转场动画自定义复杂、官方不再主推