基本概念

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

关于页面路由我们按照下面的路径来学习

:::success

• 创建页面
• 页面跳转与返回
• 页面栈
• 路由模式
• 跳转传参

:::

新建页面

页面创建步骤如下：

1. 在pages目录点击右键菜单，选择 **New->Page->Empty Page **新建命名为HomePage.ets的页面
2. 在resources/base/profile/main_profile.json文件中配置页面路由的url，代码如下

{
  "src": [	
    "pages/Index",			//对应Index.ets页面
    "pages/HomePage"		//对应HomePagePage.ets页面
  ]
}

3. 按照以上步骤创建三页面：HomePage、DetailPage、LoginPage

@Entry
@Component
struct HomePage {
  build() {
    Column() {
      Text('Home Pages').fontSize(30).fontWeight(FontWeight.Bold)
      Button('Jump To Detail').width('80%').margin({ top: 20 })
    }
    .height('100%')
      .width('100%')
      .backgroundColor('#F2F3F5')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
  }
}

@Entry
@Component
struct DetailPage {
  build() {
    Column() {
      Text('Detail Pages').fontSize(30).fontWeight(FontWeight.Bold)
      Button('Jump To Login').width('80%').margin({ top: 20 })
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F2F3F5')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

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

  build() {
    Column() {
      Text('Login Pages').fontSize(30).fontWeight(FontWeight.Bold)
      Button('Jump To Home').width('80%').margin({ top: 20 })
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F2F3F5')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

4. 将HomePage设置为首页，启动应用程序进入的第一个页面

页面跳转与返回

我们想要要的页面跳转效果如图所示

:::color1

• 从LoginPage页面能够跳转到HomePage页面，但是从HomePage页面无需返回登录页
• 从HomePage页面可以跳转到DetailPage页面，也可以从DetailPage页面返回HomePage页面

:::

Router模块提供了两种跳转模式，分别是<font style="color:#DF2A3F;">router.pushUrl()</font>和<font style="color:#DF2A3F;">router.replaceUrl()</font>。这两种模式决定了目标页面是否会替换当前页。

:::color5

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

:::

从LoginPage跳转到HomePage

import { router } from '@kit.ArkUI';

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

    build() {
      Column() {
        Text('Login Pages').fontSize(30).fontWeight(FontWeight.Bold)
        Button('Jump To Home').width('80%').margin({ top: 20 })
          .onClick(()=>{
            router.replaceUrl({url:'pages/HomePage'}) 
          })
      }
      .height('100%')
        .width('100%')
        .backgroundColor('#F2F3F5')
        .alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.Center)
    }
  }

从HomePage跳转到DetailPage

import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Home Pages').fontSize(30).fontWeight(FontWeight.Bold)
      Button('Jump To Detail').width('80%').margin({ top: 20 })
        .onClick(()=>{
          router.pushUrl({url:"pages/DetailPage"})
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F2F3F5')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

从DetailPage返回到HomePage

import { promptAction, router } from '@kit.ArkUI'

@Entry
@Component
struct DetailPage {
  build() {
    Column() {
      Text('Detail Pages').fontSize(30).fontWeight(FontWeight.Bold)
      Button('back Home').width('80%').margin({ top: 20 })
        .onClick(()=>{
           router.back()	//等价于返回键
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F2F3F5')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

页面栈

页面栈概述

页面栈是一种用来存储程序运行时页面的数据结构，遵循**先进后出**原则；页面栈的最大容量为32

• replaceUrl() 用于替换栈顶的页面
• pushUrl() 用于往栈顶添加一个页面

点击返回键时，其实就是把栈顶的页面删除

除了以上操作路由栈的函数之外，还有一些其他函数了解一下

router.clear();   //清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。
let size = router.getLength();     //获取当前在页面栈内的页面数量。

路由模式

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

:::color1

• Standard：多实例模式，也是默认情况下的跳转模式。目标页面会被添加到页面栈顶，无论栈中是否存在相同url的页面。
• Single：单实例模式。如果目标页面的url已经存在于页面栈中，则会将离栈顶最近的同url页面移动到栈顶，该页面成为新建页。如果目标页面的url在页面栈中不存在同url页面，则按照默认的多实例模式进行跳转。

:::

如在HomePage页面，跳转到DetailPage页面，再由DetailPage页面跳转到HomePage页面。

页面路由传参

• 在进行页面路由跳转时，可以传递参数，如在页面1中传递参数给页面2

再页面2中接受参数