HarmonyOS 鸿蒙Next 使用路由实现不同页面的跳转和数据传递

HarmonyOS 鸿蒙Next 使用路由实现不同页面的跳转和数据传递 页面路由

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。下面我们从页面跳转、页面返回和页面返回前增加一个询问框几个方面介绍Router模块提供的功能。

1.1页面跳转

页面跳转是开发过程中的一个重要组成部分。在使用应用程序时，通常需要在不同的页面之间跳转，有时还需要将数据从一个页面传递到另一个页面。

Router模块提供了两种跳转模式，分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页是否会替换当前页。

• router.pushUrl()：目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页。
• router.replaceUrl()：目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

注意：页面栈的最大容量为32个页面。如果超过这个限制，可以调用router.clear()方法清空历史页面栈，释放内存空间。

按照如下步骤实现页面跳转：

1）新建2个页面 etc/pages/routertest/RouterPage1.ets

@Entry
@Component
struct RouterPage1 {

  build() {
    Column(){
      Text("页面1").fontSize(50)
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)

  }
}

etc/pages/routertest/RouterPage2.ets

@Entry
@Component
struct RouterPage2 {
  build() {
    Column(){
      Text("页面2").fontSize(50)
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2）页面跳转实现（对以上两个页面分别增加Button，通过router实现页面跳转）

• RouterPage1.ets:

import router from '@ohos.router'
@Entry
@Component
struct RouterPage1 {

  build() {
    Column(){
      Text("页面1").fontSize(50)
      Button("跳转到页面2")
        .onClick(()=>{
          router.replaceUrl({
            url:'pages/routertest/RouterPage2'
          })
        })
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

• RouterPage2.ets:

import router from '@ohos.router'
@Entry
@Component
struct RouterPage2 {
  build() {
    Column(){
      Text("页面2").fontSize(50)
      Button("返回到页面1")
        .onClick(()=>{
          router.pushUrl({
            url:"pages/routertest/RouterPage1"
          })
        })
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

1.2 参数传递

如果需要在跳转时传递一些数据给目标页，则可以在调用Router模块的方法时，添加一个params属性，并指定一个对象作为参数，参数中可以是简单类型数据，也可以是对象类型数据。例如：

router.pushUrl({
   url: 'pages/Detail', // 目标url
   params: {
     id:10,
     info:{name:'zs',age:18}
} 
}

在目标页中，可以通过调用Router模块的getParams()方法来获取传递过来的参数。例如：

const params = router.getParams(); // 获取传递过来的参数对象
const id = params['id']; // 获取id属性的值
const age = params['info'].age; // 获取age属性的值

如下案例中，RouterPage1页面跳转到RouterPage2页面传递一个简单参数和一个对象参数。

1）RouterPage1.ets页面：

import router from '@ohos.router'
@Entry
@Component
struct RouterPage1 {

  build() {
    Column(){
      Text("页面1").fontSize(50)
      Button("跳转到页面2")
        .onClick(()=>{
          router.pushUrl({
            url:"pages/routertest/RouterPage2",
            params:{
              //值
              value:'hello router',

              //对象
              person:{
                name:'zs',
                age:18
              }
            }
          })
        })
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2）RouterPage2.ets页面：

import router from '@ohos.router'
import { Person } from '../managestate/LocalStorageTest2'
@Entry
@Component
struct RouterPage2 {
  @State
  value:string = router.getParams()['value']

  @State
  person:Person = router.getParams()['person']

  build() {
    Column(){
      Text("页面2").fontSize(50)
      Text(`value:${this.value}`).fontSize(30)
      Text(`person:${this.person.name}-${this.person.age}`).fontSize(30)
      Button("返回到页面1")
        .onClick(()=>{
          router.back()
        })
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}