鸿蒙4.0开发笔记之DevEco Studio页面操作router的pushUrl页面跳转与back返回上一页(五)

一、认识组件

关于HarmonyOS中ArkTS的基础组件请参见文章鸿蒙4.0开发笔记之ArkTs语言基础与基本组件结构(四)

二、实现页面跳转pushUrl

1、操作说明

实现页面跳转的核心便是router.pushUrl的调用,操作起来也很简单,总共就四步。实现步骤如下:

(1)在项目列表的page目录下创建一个新的页面

(2)创建button,并设定基本属性方法

(3)给button添加onclick事件方法

(4)在事件方法中调用router.pushUrl()事件方法,并设定需要跳转的页面的路径。

typescript 复制代码
.onClick(()=>{
          //执行跳转到Target页面:使用router路由可以指定跳转到某个url页面
          router.pushUrl({
            //在entry>src>main>resources>base>profile>main_pages.json中可以找到整个项目所有的页面
            url:"pages/Target"
          })
        })

注意:可以在项目路径下的entry>src>main>resources>base>profile>main_pages.json中找到整个项目所有的页面。

2、实现代码
typescript 复制代码
import router from '@ohos.router'
@Entry
@Component
struct Arrow {
  @State message: string = '鸿蒙Next'

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button('点我跳转')
        .fontSize(30)
        .width('50%')
        .height('50vp')
        //跳转页面动作
        .onClick(()=>{
          //执行跳转到Target页面:使用router路由可以指定跳转到某个url页面
          router.pushUrl({
            //在entry>src>main>resources>base>profile>main_pages.json中可以找到整个项目所有的页面
            url:"pages/Target"
          })
        })
    }

    //设置Column容器的宽、高
    .width('100%')
    .height('100%')
  }
}

最终的实现效果就是,点击页面上的"点我跳转"按钮,就会成功跳转到"Target"页面。

三、返回上一个页面back

当页面跳转到"Target"页面后,如何在该页面返回到上一个页面呢?

其实只需要调用一个router.back()事件方法就OK了。实现代码如下:

typescript 复制代码
import router from '@ohos.router'
@Entry
@Component
struct Target {
  @State message: string = '无际鹰'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontStyle(FontStyle.Italic)
          .backgroundColor(Color.Blue)
          .fontColor(Color.Orange)
          .onClick(()=>{
            //返回上一个页面,及从哪里跳转来的,就回到哪里去
            router.back()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

这样的整体效果就是,在Arrow页面上点击页面上的"点我跳转"按钮,就会成功跳转到Target页面;然后在Target页面点击"无际鹰"就会跳转回Arrow页面。

相关推荐
两颗泡腾片30 分钟前
黑马程序员C++核心编程笔记--类和对象--运算符重载
c++·笔记
致***锌2 小时前
上证50ETF期权的交易时间是什么时候?
笔记
thginWalker2 小时前
图解网络-小林coding笔记(持续更新)
网络·笔记
草堂春睡足4 小时前
【Datawhale AI夏令营】科大讯飞AI大赛(大模型技术)/夏令营:让AI理解列车排期表
人工智能·笔记
Olrookie5 小时前
若依前后端分离版学习笔记(一)——本地部署
笔记·后端·开源
##echo6 小时前
嵌入式Linux裸机开发笔记9(IMX6ULL)GPIO 中断实验(1)
linux·c语言·笔记·单片机·嵌入式硬件
我爱学嵌入式9 小时前
C语言第 9 天学习笔记:数组(二维数组与字符数组)
c语言·笔记·学习
_Kayo_17 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
zhanshuo17 小时前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo17 小时前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos