重生之我是隔壁老王在床下，我有能力生还吗？——Ability内页面跳转和数据传输

前言

一道刺眼的光芒过后，我猛地睁开眼睛，却发现自己正蜷缩在一张陌生的床底下。四周弥漫着一股令人窒息的霉味，仿佛被遗忘已久。这是怎么回事？我明明记得自己已经死了，为什么会重生在这里？

我努力回忆着上一世的一切，那些失去的亲人、朋友和梦想如潮水般涌上心头。不，我不能就这样屈服于命运！这一世，我要把我失去的一切都夺回来！

然而，眼前这个地狱般的开局让我倍感绝望。我必须想办法离开这里，找到一个安全的地方重新开始。突然，我脑海中灵光一闪，想起了上一世学过的HarmonyOS知识。如果我能够利用Ability内页面跳转功能，或许就能逃出生天。

一、新建Ability内页面

1. 初始化一个工程后，会生成以下内容：

• 在src/main/ets/entryability目录下，初识会生成一个Ability文件EntryAbility.ts。可以EntryAbility.ts文件中根据业务需要实现Ability的生命周期回调函数

• 在src/main/ets/pages目录下，会生成一个Index界面。这也是基于Ability实现的应用入口页面。可以砸Index页面中根据业务需要实现入口页面的功能

2. 为了实现页面的跳转和数据传递，需要新建一个页面。在src/main/ets/pages目录下，可以通过New->Page来新建页面
   

在原有Index页面的基础上，新建一个名为Second的页面

Second页面创建完成后，会进行两个动作。
第一个动作是在src/main/ets/pages目录下创建一个Second.ets文件。文件内容为

@Entry
@Component
struct Second {
 @State message: string = 'Hello World'

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

另一个动作是将Second页面信息配置到src/main/resources/base/profile/main_pages.json文件中文件内容为

{
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}

我们可以分别将Index.ets和Second.ets的message的变量值改为Index界面和Second界面用来区分和传递。

二、页面跳转和传参

页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面URL找到目标也页面，从而实现跳转。
使用页面路由之前，需要先导入router模块，代码如下：

import router from '@ohos.router';

1. router.push()
   通过调用router.push()方法，体哦啊转到Ability指定页面，每调用一次，均会新增一个页面。默认情况下页面栈数量会加1，页面栈支持最大页面数量是32
   使用方法如下：

router.push({
   url:"pages/Second",
   params:{
       src:'Index页面传来的数据',
       }
   }
})

注意：
当页面栈数量较大或者超过32时，了一使用router.clear()方法清楚页面栈的所有历史界面，仅保留当前页作为栈顶页面

2. router.replace()
   通过使用router.replace()方法，跳转到Ability内的指定页面。既使用新的页面替换当前页面，并销毁被替换的当前页面，页面栈数量保持不变。
   使用方法如下：

router.replace({
   url:"pages/Second",
   params:{
       src:'Index页面传来的数据',
       }
   }
})

3. 给router.push()方法和router.replace()方法加mode参数

   router.push()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard标准模式。

说明：
在单实例模式下，如果要添加的目标页面已经在页面栈中有了相同的URL，那么离栈顶最近的URL页面就会 被移动到栈顶，移动后的页面为新建页，原来的页面仍然保存在栈中，页面数量不变。如果目标页面在页面栈 中不存在相同的URL的页面，那么按照标准模式跳转，页面数量会加1.

使用方法如下：

router.push({
    url:"pages/Second",
    params:{
        src:'Index页面传来的数据',
        }
    }
},router.RouterMode.Single)

最后，在Index.ets文件中添加按钮触发跳转，Index.ets代码如下：

import router from '@ohos.router';
@Entry
@Component
struct Index {
  @State message: string = 'Index页面'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        //添加按钮，触发跳转
        Button('跳转到第二个页面')
          .fontSize(40)
          .onClick(()=>{
            router.push({
              url:'pages/Second',
              params:{//给要跳转的页面传参数
                src:'Index页面传来的数据'//传的参数
              }
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

三、参数接受

通过调用router.getParams:()方法获取Index页面传递过来的自定义参数。
import router from ‘@ohos.router’;

@Entry
@Component
struct Second {
  @State src: string = router.getParams()?.['src']//页面刷新展示
  ...
}
      可以通过调用router.back()方法返回上一个页面。
      最终，完整的Second.ets代码如下：
import router from '@ohos.router';
@Entry
@Component
struct Second {
  @State message: string = 'Second页面'
  @State src: string = router.getParams()?.['src']//页面刷新展示
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        //显示传参内容
        Text(this.src)
          .fontSize(30)
        //添加按钮，触发返回
        Button('返回')
          .fontSize(40)
          .onClick(() => {
            router.back();
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

效果展示