HarmonyOS第十章：路由

🎉 博客主页：【剑九_六千里-CSDN博客】【剑九_六千里-掘金社区】
🎨 上一篇文章：【HarmonyOS第九章：鸿蒙axios(@ohos/axios)】
🎠 系列专栏：【HarmonyOS系列】
💖 感谢大家点赞👍收藏⭐评论✍

1. 跳转与后退 API

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

1.1 router.pushUrl() 路由跳转

• 路由跳转方法
• 会添加历史记录
• 可返回

1.1.1 基本使用方式

创建一个项目：

选择项目类型：

设置项目基础内容：

在项目中创建一个页面：

查看路由是否已配置：

resources/base/profile/main_pages.json

• main_pages.json 必须有页面路径，才能实现页面跳转。
• 通过手动方式创建的 ArkTs File 页面文件，需要在 main_pages.json 文件中进行手动设置。
  

页面中使用 router.pushUrl 进行页面跳转：

导入路由：

import router from '@ohos.router';

使用路由：

Button("跳转到User页面").onClick(() => {// 跳转// 会加入历史记录，可返回router.pushUrl({url: "pages/User"});})

完整示例：

import router from '@ohos.router';@Entry
@Component
struct Index {@State message: string = 'Hello Index';build() {Column() {Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold)Button("跳转到User页面").onClick(() => {// 跳转// 会加入历史记录，可返回router.pushUrl({url: "pages/User"});})}.height('100%').width('100%')}
}

注意:
页面堆栈的容纳极限为32个页面。若页面数量超出此限制，可执行 router.clear() 函数以清除历史页面堆栈，进而释放内存。

1.1.2 传递参数

传参(使用 params 传递)：

pages/Index.ets

import router from '@ohos.router';@Entry
@Component
struct Index {@State message: string = 'Hello Index';build() {Column() {Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold)Button("跳转到User页面").onClick(() => {// 跳转// 会加入历史记录，可返回router.pushUrl({url: "pages/User",params: {name: '张三',age: 20}});})}.height('100%').width('100%')}
}

获取参数（router.getParams）：
pages/User.ets

import router from '@ohos.router';interface Params {name: string;age: number;
}@Entry
@Component
struct User {@State message: string = 'Hello User';@State content: string = '';aboutToAppear(): void {const params = router.getParams() as Params;this.content = params?.name + ' ' + params?.age}build() {Column() {Text(this.message).id('UserHelloWorld').fontSize(50).fontWeight(FontWeight.Bold)Text(`这是Index传递过来的数据：${this.content}`).fontSize(30).fontWeight(FontWeight.Bold)}.height('100%').width('100%')}
}

1.2 router.back() 返回上一页

可以使用以下几种方式返回页面：

• 方式一：返回到上一个页面。

import { router } from '@kit.ArkUI';
router.back();

这种方式会返回到上一个页面，即上一个页面在页面栈中的位置。但是，上一个页面必须存在于页面栈中才能够返回，否则该方法将无效。

• 方式二：返回到指定页面。

返回普通页面。

import { router } from '@kit.ArkUI';
router.back({url: 'pages/Home'
});

返回命名路由页面。

import { router } from '@kit.ArkUI';
router.back({url: 'myPage' //myPage为返回的命名路由页面别名
});

这种方式可以返回到指定页面，需要指定目标页面的路径。目标页面必须存在于页面栈中才能够返回。

• 方式三：返回到指定页面，并传递自定义参数信息。

返回到普通页面。

import { router } from '@kit.ArkUI';
router.back({url: 'pages/Home',params: {info: '来自Home页'}
});

返回命名路由页面。

import { router } from '@kit.ArkUI';
router.back({url: 'myPage', //myPage为返回的命名路由页面别名params: {info: '来自Home页'}
});

这种方式不仅可以返回到指定页面，还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页面中通过调用router.getParams方法进行获取和解析。

1.2.1 示例

pages/User.ets

直接调用 router.back()即可：

import router from '@ohos.router';interface Params {name: string;age: number;
}@Entry
@Component
struct User {@State message: string = 'Hello User';@State content: string = '';aboutToAppear(): void {const params = router.getParams() as Params;this.content = params?.name + ' ' + params?.age}build() {Column() {Text(this.message).id('UserHelloWorld').fontSize(50).fontWeight(FontWeight.Bold)Text(`这是Index传递过来的数据：${this.content}`).fontSize(30).fontWeight(FontWeight.Bold)Button('返回Index页面').onClick(() => {router.back()})}.height('100%').width('100%')}
}

1.2.2 传递参数

pages/User.ets

import router from '@ohos.router';interface Params {name: string;age: number;
}@Entry
@Component
struct User {@State message: string = 'Hello User';@State content: string = '';aboutToAppear(): void {const params = router.getParams() as Params;if(params.name) {this.content = params?.name + ' ' + params?.age}}build() {Column() {Text(this.message).id('UserHelloWorld').fontSize(50).fontWeight(FontWeight.Bold)Text(`这是Index传递过来的数据：${this.content}`).fontSize(30).fontWeight(FontWeight.Bold)Button('返回Index页面').onClick(() => {// 默认返回上一页// router.back();// 指定返回某个页面router.back({url: "pages/Index",params: {name: '李四',age: 36}})})}.height('100%').width('100%')}
}

pages/Index.ets

import router from '@ohos.router';interface Params {name: string;age: number;
}@Entry
@Component
struct Index {@State message: string = 'Hello Index';@State content: string = '';onPageShow(): void {const params = router.getParams() as Params;console.log(`${params}`, 'params')if(params.name) {this.content = params?.name + ' ' + params?.age}}build() {Column() {Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold)Button("跳转到User页面----pushUrl").onClick(() => {// 跳转// 会加入历史记录，可返回router.pushUrl({url: "pages/User",params: {name: '张三',age: 20}});})Text(`这是User传递过来的数据：${this.content}`)}.height('100%').width('100%')}
}

说明

当使用router.back方法返回到指定页面时，原栈顶页面（包括）到指定页面（不包括）之间的所有页面栈都将从栈中弹出并销毁。

另外，如果使用router.back方法返回到原来的页面，原页面不会被重复创建，因此使用@State声明的变量不会重复声明，也不会触发页面的aboutToAppear生命周期回调。如果需要在原页面中使用返回页面传递的自定义参数，可以在需要的位置进行参数解析。例如，在onPageShow生命周期回调中进行参数解析。

1.3 router.replaceUrl() 替换当前页

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

1.3.1 示例

import router from '@ohos.router';@Entry
@Component
struct Index {@State message: string = 'Hello Index';build() {Column() {Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold)Button("跳转到User页面----replaceUrl").onClick(() => {// 跳转// 不会加入历史记录，只能替换当前页面，不可返回router.replaceUrl({url: "pages/User",params: {name: '张三',age: 20}});})}.height('100%').width('100%')}
}

1.3.1 基本使用

2. 路由模式

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

• Standard：多实例模式，也是默认情况下的跳转模式。目标页面会被添加到页面栈顶，无论栈中是否存在相同url的页面。

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

简单理解

1. Standard：每次执行 push 操作时，无论该页面是否已被添加过，页面栈都会新增一项。
2. Single：如果之前已添加过某页面，则不会再新加页面，而是将已添加过的那个页面重新呈现。

2.1 标准模式（Standard）

Button("跳转到User页面----pushUrl").onClick(() => {// 跳转// 会加入历史记录，可返回router.pushUrl({url: "pages/User",params: {name: '张三',age: 20}}, router.RouterMode.Standard);
})

2.2 单实例模式（Single）

Button("跳转到User页面----pushUrl").onClick(() => {// 跳转// 会加入历史记录，可返回router.pushUrl({url: "pages/User",params: {name: '张三',age: 20}}, router.RouterMode.Single);
})