当前位置：首页 > news >正文

十二、路由、生命周期函数

news 2025/11/2 0:47:15

router路由

页面路由指的是在应用程序中实现不同页面之间的跳转，以及数据传递。通过 Router 模块就可以实现这个功能

2.1创建页面

之前是创建的文件，使用路由的时候需要创建页面，步骤略有不同

方法 1：直接右键新建Page（常用）
方法 2：单独添加页面并配置

2.1.1直接右键新建Page

2.1.2单独添加页面并配置

1.新建页面

pages/DetailPage.ets

@Entry
@Component
struct DetailPage {build() {Column({ space: 15 }) {Text('Detail Page').fontSize(40)Button('Back')}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}

2.调整配置

:::success
小技巧:

按两次 shift 在弹出的界面中输入文件名，可以快速定位

:::

{
//这是一个数组,页面路径管理中心"src": ["pages/Index",
+    "pages/DetailPage"]
}

:::success
TIP

手动新建一个页面（ets）文件，需要在** main_pages.json **中手动配置
可以自动创建（会自动添加配置）
删除页面**不会**自动删除配置，需要手动删除

:::

2.2.页面跳转

接下来学习路由的跳转，页面跳转是开发过程中的一个重要组成部分。

在使用应用程序时，通常需要在不同的页面之间跳转，有时还需要将数据从一个页面传递到另一个页面。接下来咱们分场景来讲解这部分的内容:

页面跳转与后退
路由模式
参数传递

2.2.1页面跳转与后退

首先来看看看使用频率最高的跳转和后退，核心就是使用 router 的方法

// 1. 导入
import router from '@ohos.router';// 2.调用方法-普通跳转(可以返回)
router.pushUrl({url:'页面地址'
})// 2.调用方法-替换跳转（无法返回）
router.replaceUrl({url:'页面地址'
})// 2.调用方法-返回（）
router.back()

:::info
试一试：

创建目录，管理页面，
1. 在目录下添加：首页，详情页
页面 A 中分别使用pushUrl和replaceUrl跳转到页面 B
页面 B 测试 back 方法返回和

:::

import router from '@ohos.router'@Entry@Componentstruct Index {build() {Column({ space: 15 }) {Text('首页').fontSize(40)// 通过 router 模块进行跳转Button('去详情页-pushUrl').onClick(() => {router.pushUrl({url: 'pages/day11/knowledges/router01/DetailPage',})})Button('去详情页-replaceUrl').onClick(() => {router.replaceUrl({url: 'pages/day11/knowledges/router01/DetailPage',})})}.height('100%').width('100%').justifyContent(FlexAlign.Center)}}

import router from '@ohos.router'@Entry@Componentstruct DetailPage {build() {Row() {Column() {Text('详情页').fontSize(50).fontWeight(FontWeight.Bold)Button('返回').onClick(() => {router.back()})}.width('100%')}.height('100%')}}

:::info
router.pushUrl() 和 router.replaceUrl()。都可以跳转页面，区别为是否会替换当前页。

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

划重点：pushUrl 可以返回 replaceUrl 无法返回

:::

2.2.2页面栈

页面栈是用来存储程序运行时页面的一种数据结构，遵循先进后出的原则，咱们结合刚刚的代码来说明一下：

:::info
页面栈的最大容量为32个页面

:::

2.2.2.1pushUrl的情况

先来看看 pushUrl的情况
1默认打开首页 → 首页入栈
2pushUrl 去详情页 → 详情页入栈
3back 返回上一页 → 详情页出栈
4此时页面栈中应该只有一个页面
整一个过程中，都可以 router.getLength 进行查看

2.2.2.2replaceUrl 的情况

再来看看replaceUrl的情况
1默认打开首页 → 首页入栈
2replaceUrl 去详情页 → 详情页替换首页，首页销毁
3back 无法返回 → 没有上一页

2.2.2.3页面栈相关 api

为了让咱们更好的获取页面栈的信息，router 模块也提供了对应的 api 以供使用

// 获取页面栈长度
router.getLength()// 获取页面状态 
let page = router.getState();
console.log('current index = ' + page.index);
console.log('current name = ' + page.name);
console.log('current path = ' + page.path);// 清空页面栈
router.clear()

2.3路由模式

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

:::info
简而言之：
1Standard：无论之前是否添加过，一直添加到页面栈【常用】
2Single：如果之前加过页面，会使用之前添加的页面【看情况】

:::

// 多实例模式下，router.RouterMode.Standard参数可以省略。// pushUrl 和 replaceUrl 均可以在第二个参数设置 【路由模式】
router.pushUrl(options,mode)
router.replaceUrl(options,mode)

参数名	类型	必填	说明
options	RouterOptions	是