【HarmonyOS NEXT星河版开发实战】页面跳转

个人主页→VON

收录专栏→鸿蒙综合案例开发 

代码及其图片资源会发布于gitee上面（已发布）

gitee地址https://gitee.com/wang-xin-jie234

前言

单一页面所实现的具体功能十分的局限，所以页面之间的跳转就显得及其重要，本案例就以简单的页面之间的跳转为例来进行这一基础知识的讲解。

界面功能介绍

这里就以两个页面为例，第一页有一个next按钮，通过单击next按钮会跳转到第二页。第二页中的"首页向您问好"是首页的文字，通过传参传到了第二页。通过单击第二页中的back按钮又会跳转到首页。

界面构建过程

就是一个简单的页面构建，只有文字和一个按钮组成，可以根据实际情况来进行页面的精彩构建。

第二个页面也十分的简洁，相较于第一个页面就多了个传入的参数。

知识点概述

页面跳转

在鸿蒙操作系统中，页面跳转是通过Router模块来实现的。鸿蒙操作系统（HarmonyOS）作为华为推出的全新分布式操作系统，旨在通过统一的语言和框架，实现应用在不同设备间的无缝连接与协同工作。页面跳转作为应用开发中的常见需求，对于提升用户体验和应用流畅度具有重要意义。

鸿蒙系统中的页面跳转主要依赖于Router模块，该模块提供了丰富的API支持各种页面跳转场景。Router模块提供两种主要跳转模式：pushUrl()和replaceUrl()。这两种模式主要决定了目标页面是否会替换当前页面。pushUrl()模式允许目标页面压入页面栈，保留当前页状态，可通过返回键或调用router.back()方法回到当前页。而replaceUrl()模式则会替换并销毁当前页面，释放其资源，用户无法返回到被替换的页面。

页面传参

在鸿蒙操作系统中，页面传参主要通过路由（Route）和意图（Intent）两种方式实现。鸿蒙操作系统（HarmonyOS）是华为推出的一款面向全场景的分布式操作系统，它允许开发者在不同设备间实现无缝连接和协同工作。页面传参是应用开发中的常见需求，对于提升用户体验和应用流畅度具有重要意义。

首先，介绍路由方式传参。路由方式主要适用于页面间的跳转和参数传递。具体步骤如下：首先需要引入路由模块，然后使用router.push()方法进行页面跳转和参数传递。这种方法允许将参数以对象的形式传递给目标页面。例如，可以这样写：router.push({url: "pages/[页面命名]", params: {value: 'test'}})。目标页面接收参数也非常简单，只需使用router.getParams()方法获取传递过来的参数对象，并可以通过相应的键值访问具体参数。

其次，介绍意图方式传参。意图方式传参在鸿蒙系统中也是一种重要的页面传参手段。鸿蒙提供了startAbility和startAbilityForResult两种方法来启动一个页面，并传递参数。具体步骤如下：第一步是创建一个IntentParams对象，并通过setParam方法设置需要传递的参数。第二步是调用startAbility或startAbilityForResult方法，将IntentParams对象作为参数传递。在目标页面中，可以通过重载的onStart方法获取传递过来的意图对象，并通过getStringParam等方法获取具体参数。

全套源代码

Index页面

html 复制代码

import router from '@ohos.router'

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('First  Page')
        .height('50%')
        .fontSize(30)
        .fontWeight(700)
      Button('Next')
        .width(200)
        .fontSize(20)
        .fontWeight(700)
        .onClick(()=>{
          router.pushUrl({
            url:'pages/SecondPage',
            params:{
              src:'首页向您问好'
            }
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}

SecondPage页面

html 复制代码

import router from '@ohos.router'

@Entry
@Component
struct SecondPage {
  @State src:string=(router.getParams() as Record<string,string>)['src']
  build() {
    Column(){
      Text('Second  Page')
        .height('50%')
        .fontSize(30)
        .fontWeight(700)
      Text(this.src)
        .fontSize(20)
        .fontWeight(500)
        .margin({bottom:20})
      Button('Back')
        .width(200)
        .fontSize(20)
        .fontWeight(700)
        .onClick(()=>{
          router.pushUrl({
            url:'pages/Index'
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}