一、页面跳转

        在一个应用包含一个UIAbility的场景下，可以通过新建多个页面来实现和丰富应用的内容。这会涉及到UIAbility内页面的新建以及UIAbility内页面的跳转和数据传递。

      打开DevEco Studio，选择一个Empty Ability工程模板，创建一个工程，例如命名为MyApplication。一些目录的介绍：

1、在src/main/ets/entryability目录下，初始会生成一个UIAbility文件EntryAbility.ts。可以在EntryAbility.ts文件中根据业务需要实现UIAbility的生命周期回调内容。

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

3、在src/main/ets/pages目录下，右键New->Page，新建一个Second页面，用于实现页面间的跳转和数据传递。

实现步骤：

1. 为了实现页面的跳转和数据传递，需要新建一个页面。在原有Index页面的基础上，新建一个页面，例如命名为Second.ets。

1. 页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面url找到目标页面，从而实现跳转。通过页面路由模块，可以使用不同的url访问不同的页面，包括跳转到UIAbility内的指定页面、用UIAbility内的某个页面替换当前页面、返回上一页面或指定的页面等。

import router from '@ohos.router';

EntryAbility.ts文件内容不变

Index.ets第一个页面代码：

import router from '@ohos.router';

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

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(32)
          .fontWeight(FontWeight.Bold)
        Blank()
        Button("Next")
          .width('296vp')
          .height('40vp')
          .margin({ top: 20 })
          .fontSize('16fp')
          .onClick(() => {
            router.pushUrl({
              url: 'pages/Second',
              params: {
                name: "Index页面传来的数据",
              }
            }, router.RouterMode.Single)
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

Second.ets第二个页面代码：

import router from '@ohos.router';

@Entry
@Component
struct Second {
  @State message: string = 'Second Pages';
  @State name: string = (router.getParams() as Record<string, string>)['name'];

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(32)
          .fontWeight(FontWeight.Bold)
        Text(this.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .opacity(0.6)
          .fontColor(Color.Red)
        Blank()
        Button("Next")
          .width('296vp')
          .height('40vp')
          .margin({ top: 20 })
          .fontSize('16fp')
          .onClick(() => {
            router.replaceUrl({
              url: 'pages/ThreePage',
              params: {
                name: "Second页面传来的数据",
              }
            }, router.RouterMode.Single)
          })
        Blank()
        Button("Back")
          .width('296vp')
          .height('40vp')
          .margin({ top: 20 })
          .fontSize('16fp')
          .onClick(() => {
            router.back();
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

ThreePage.ets第三个页面代码：

import router from '@ohos.router';

@Entry
@Component
struct ThreePage {
  @State message: string = 'Three Pages'
  @State name: string = (router.getParams() as Record<string, string>)['name'];

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(32)
          .fontWeight(FontWeight.Bold)
        Text(this.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .opacity(0.6)
          .fontColor(Color.Red)
        Blank()
        Button("Back")
          .width('296vp')
          .height('40vp')
          .margin({ top: 20 })
          .fontSize('16fp')
          .onClick(() => {
            router.back();
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

注意：从中也可以看出，从第一个页面跳转到第二个页面使用的是router.pushUrl（...）方式跳转页面，而第二个页面跳转到第三个页面使用的是router.replaceUrl（...）方式。

方式一：API9及以上，router.pushUrl()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard多实例模式。

在单实例模式下：如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近同url页面会被移动到栈顶，移动后的页面为新建页，原来的页面仍然存在栈中，页面栈的元素数量不变；如果目标页面的url在页面栈中不存在同url页面，按多实例模式跳转，页面栈的元素数量会加1。

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

在单实例模式下：如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近同url页面会被移动到栈顶，替换当前页面，并销毁被替换的当前页面，移动后的页面为新建页，页面栈的元素数量会减1；如果目标页面的url在页面栈中不存在同url页面，按多实例模式跳转，页面栈的元素数量不变。

router.replaceUrl({
  url: 'pages/ThreePage',
  params: {
    name: 'Second页面传来的数据',
  }
}, router.RouterMode.Single)

import router from '@ohos.router';

@Entry
@Component
struct Second {
  @State name: string = (router.getParams() as Record<string, string>)['name'];
  // 页面刷新展示
  ...
}