【鸿蒙开发】页面路由

HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由

1. 页面跳转

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

1.1 pushUrl

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

Index.ets

import router from '@ohos.router'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('首页')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)

      Button() {
        Text('pushUrl 跳转 DetailPage')
          .fontColor(Color.White)
      }
      .width(200)
      .height(50)
      .margin({ bottom: 20 })
      .onClick(() => {
        router.pushUrl({ url: 'pages/DetailPage' })
      })
    }
    .width("100%")
    .height("100%")
  }
}

 创建页面 DetailPage.ets

@Entry
@Component
struct DetailPage {
  @State message: string = 'DetailPage'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

1.2 replaceUrl

目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

修改 Index.ets

import router from '@ohos.router'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('首页')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)

      Button() {
        Text('pushUrl 跳转 DetailPage')
          .fontColor(Color.White)
      }
      .width(200)
      .height(50)
      .margin({ bottom: 20 })
      .onClick(() => {
        router.pushUrl({ url: 'pages/DetailPage' })
      })

      Button() {
        Text('replaceUrl 跳转 DetailPage')
          .fontColor(Color.White)
      }
      .width(200)
      .height(50)
      .margin({ bottom: 20 })
      .onClick(() => {
        router.replaceUrl({ url: 'pages/DetailPage' })
      })
    }
    .width("100%")
    .height("100%")
  }
}

2. 页面返回

当用户在一个页面完成操作后，通常需要返回到上一个页面或者指定页面，这就需要用到页面返回功能。在返回的过程中，可能需要将数据传递给目标页，这就需要用到数据传递功能。

修改 DetailPage.ets

import router from '@ohos.router'

@Entry
@Component
struct DetailPage {
  @State message: string = 'DetailPage'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button() {
          Text('返回')
            .fontColor(Color.White)
        }
        .width(200)
        .height(50)
        .margin({ bottom: 20 })
        .onClick(() => {
          // 返回到上一个页面
          router.back()
          // 返回到指定页面
          // router.back({
          //   url: 'pages/Index'
          // })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

3. 传递参数

修改 Index.ets

import router from '@ohos.router'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('首页')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)

      Button() {
        Text('pushUrl 跳转 DetailPage')
          .fontColor(Color.White)
      }
      .width(200)
      .height(50)
      .margin({ bottom: 20 })
      .onClick(() => {
        router.pushUrl({
          url: 'pages/DetailPage',
          params: {
            name: "lili",
            age: 18
          }
        })
      })

      Button() {
        Text('replaceUrl 跳转 DetailPage')
          .fontColor(Color.White)
      }
      .width(200)
      .height(50)
      .margin({ bottom: 20 })
      .onClick(() => {
        router.replaceUrl({ url: 'pages/DetailPage' })
      })
    }
    .width("100%")
    .height("100%")
  }
}

修改 DetailPage.ets

import router from '@ohos.router'

class RouterParams {
  name: string
  age: number
}

@Entry
@Component
struct DetailPage {
  @State message: string = 'DetailPage'

  aboutToAppear() {
    const params = router.getParams() as RouterParams;
    if (params?.name) {
      this.message = "Hello " + params.name;
    }
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button() {
          Text('返回')
            .fontColor(Color.White)
        }
        .width(200)
        .height(50)
        .margin({ bottom: 20 })
        .onClick(() => {
          // 返回到上一个页面
          router.back()
          // 返回到指定页面
          // router.back({
          //   url: 'pages/Index'
          // })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

4. 路由的模式

Router模块提供了两种实例模式，分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。

Standard

标准实例模式，也是默认情况下的实例模式。每次调用该方法都会新建一个目标页，并压入栈顶。

Single

单实例模式。即如果目标页的url在页面栈中已经存在同url页面，则离栈顶最近的同url页面会被移动到栈顶，并重新加载；如果目标页的url在页面栈中不存在同url页面，则按照标准模式跳转。