HarmonyOS第十章：路由

🎉 博客主页：【剑九_六千里-优快云博客】【剑九_六千里-掘金社区】
🎨 上一篇文章：【HarmonyOS第九章：鸿蒙axios(@ohos/axios)】
🎠 系列专栏：【HarmonyOS系列】
💖 感谢大家点赞👍收藏⭐评论✍

1. 跳转与后退 API

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

1.1 router.pushUrl() 路由跳转

• 路由跳转方法
• 会添加历史记录
• 可返回

1.1.1 基本使用方式

创建一个项目：

选择项目类型：

设置项目基础内容：

在项目中创建一个页面：

查看路由是否已配置：

resources/base/profile/main_pages.json

• main_pages.json 必须有页面路径，才能实现页面跳转。
• 通过手动方式创建的 ArkTs File 页面文件，需要在 main_pages.json 文件中进行手动设置。
  

页面中使用 router.pushUrl 进行页面跳转：

导入路由：

import router from '@ohos.router';

使用路由：

Button("跳转到User页面").onClick(() => {
   
   
        // 跳转
        // 会加入历史记录，可返回
        router.pushUrl({
   
   
          url: "pages/User"
        });
      })

完整示例：

import router from '@ohos.router';

@Entry
@Component
struct Index {
   
   
  @State message: string = 'Hello Index';

  build() {
   
   
    Column() {
   
   
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button("跳转到User页面").onClick(() => {
   
   
        // 跳转
        // 会加入历史记录，可返回
        router.pushUrl({
   
   
          url: "pages/User"
        });
      })
    }
    .height('100%')
    .width('100%')
  }
}

注意:
页面堆栈的容纳极限为32个页面。若页面数量超出此限制，可执行 router.clear() 函数以清除历史页面堆栈，进而释放内存。

1.1.2 传递参数

传参(使用 params 传递)：

pages/Index.ets

import router from '@ohos.router';

@Entry
@Component
struct Index {
   
   
  @State message: string = 'Hello Index';

  build() {
   
   
    Column() {
   
   
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button("跳转到User页面").onClick(() => {
   
   
        // 跳转
        // 会加入历史记录，可返回
        router.pushUrl({
   
   
          url: "pages/User",
          params: {