精通鸿蒙开发页面路由

一、页面跳转简介

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的URL地址，可以方便地进行页面路由，轻松地访问不同的页面。

Router适用于模块间与模块内页面切换，通过每个页面的URL实现模块间解耦，也可以将数据从一个页面传递到另外一个页面。

1) Router模块提供了两种跳转模式

router.pushUrl()

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

router.replaceUrl()

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

2）Router模块提供了两种实例模式

multiton多实例模式

默认情况下的跳转模式。目标页面会被添加到页面栈顶，无论栈中是否存在相同URL的页面。

singleton单实例模式（缺省）

如果目标页面的URL已经存在于页面栈中，则会将离栈顶最近的同URL页面移动到栈顶，该页面成为新建页。如果目标页面的URL在页面栈中不存在同URL页面，则按照默认的多实例模式进行跳转。

二、实战举例

2.1 升级开发工具DevEco Studio

发现老的工具已经不行了，示例代码都跑不起来。只能先升级新的工具了。

首先将老的工具卸载，然后去官网下载新的工具：

2.2 安装完成后，下载配套SDK

2.3 下载模拟器（无语了，还要申请才有）

2.4 审批下来前，先使用Preview功能测试

2.5 示例代码

1）先创建Index.ets入口页面

//使用Router相关功能之前，需要在代码中先导入Router模块。
import { router } from '@kit.ArkUI'

class routerParams {
  src:string
  constructor(str:string) {
    this.src = str
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello 第一个页面！';

  build() {
    RelativeContainer() {
      Row() {
        Column() {
          Text(this.message)
            .id('message_in_page')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .alignRules({
              center: { anchor: '__container__', align: VerticalAlign.Center },
              middle: { anchor: '__container__', align: HorizontalAlign.Center }
            })
          Divider()
          Button('点击跳转')
            .fontSize(50)
            .onClick(() => {
              router.pushUrl({
                //目标URL
                url: 'pages/Next',
                params: new routerParams('redirect to second page from Index.ets')
              }).catch((error: Error) => {
                console.info('Index Page', 'IndexPage push error' + JSON.stringify(error));
              });
            })
        }
      }
    }
  }
}

2）创建跳转用的Next.ets第二个页面

//使用Router相关功能之前，需要在代码中先导入Router模块。
import { router } from '@kit.ArkUI';

class routerParams {
  src:string = ''
}
/**
 * The SecondPage is the router push page.
 */
@Entry
@Component
struct SecondPage {
  @State message: string = 'Hello 第二个页面！'
  //可以通过调用Router模块的getParams()方法来获取传递过来的参数
  @State params: routerParams = router.getParams() as routerParams
  @State src: string = this.params.src;

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.src)
          .fontSize(50)
        Blank()
        Button('返回上一个页面')
          .fontSize(50)
          .onClick(() => {
            router.back();
          })
      }
      .height('100%')
      .width('100%')
    }
    .height('100%')
    .width('100%')
  }
}