鴻蒙系統(tǒng)以其獨特的分布式架構(gòu)和跨設(shè)備的統(tǒng)一體驗而備受矚目。在這個系統(tǒng)中，頁面路由（Router）機制是連接應(yīng)用各頁面的關(guān)鍵組成部分。本文將深入探討鴻蒙系統(tǒng)的頁面路由，揭示其工作原理、特點以及在應(yīng)用開發(fā)中的實際應(yīng)用。

1. 實現(xiàn)

1.1. 兩種跳轉(zhuǎn)模式

Router模塊提供了兩種跳轉(zhuǎn)模式，分別是router.pushUrl()和router.replaceUrl()。這兩種模式?jīng)Q定了目標(biāo)頁是否會替換當(dāng)前頁。

• router.pushUrl()：目標(biāo)頁不會替換當(dāng)前頁，而是壓入頁面棧。這樣可以保留當(dāng)前頁的狀態(tài)，并且可以通過返回鍵或者調(diào)用router.back()方法返回到當(dāng)前頁。

• router.replaceUrl()：目標(biāo)頁會替換當(dāng)前頁，并銷毀當(dāng)前頁。這樣可以釋放當(dāng)前頁的資源，并且無法返回到當(dāng)前頁。

1.2. 兩種實例模式

Router模塊提供了兩種實例模式，分別是Standard和Single。這兩種模式?jīng)Q定了目標(biāo)url是否會對應(yīng)多個實例。

• Standard：標(biāo)準(zhǔn)實例模式，也是默認(rèn)情況下的實例模式。每次調(diào)用該方法都會新建一個目標(biāo)頁，并壓入棧頂。

• Single：單實例模式。即如果目標(biāo)頁的url在頁面棧中已經(jīng)存在同url頁面，則離棧頂最近的同url頁面會被移動到棧頂，并重新加載；如果目標(biāo)頁的url在頁面棧中不存在同url頁面，則按照標(biāo)準(zhǔn)模式跳轉(zhuǎn)。

2. 頁面路由的工作原理

鴻蒙系統(tǒng)的頁面路由基于一種輕量級的棧式管理結(jié)構(gòu)。每個頁面都有一個唯一的標(biāo)識符，當(dāng)頁面切換時，頁面路由根據(jù)標(biāo)識符入棧或出棧，實現(xiàn)頁面的切換和管理。

3. 具體實現(xiàn)

3.1. 引入Router模塊

import router from '@ohos.router';

3.2. 代碼示例

LoginPage.ets

import router from '@ohos.router';
import promptAction from '@ohos.promptAction';@Entry
@Component
struct LoginPage {@State message: string = 'Login Page'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button('跳轉(zhuǎn)1').width(100).margin({ top: 10 }).onClick(() => {router.pushUrl({ url: 'pages/HomePage', params: { msg: 'hello world，我是上一個頁面?zhèn)鬟f過來的' } },router.RouterMode.Standard, (err) => {if (err) {promptAction.showToast({ message: `跳轉(zhuǎn)失敗：code is ${err.code}, message is ${err.message}` })return;} else {promptAction.showToast({ message: `跳轉(zhuǎn)成功` })}})})Button('跳轉(zhuǎn)2').width(100).margin({ top: 10 }).onClick(() => {router.pushUrl({ url: 'pages/HomePage' },router.RouterMode.Single, (err) => {if (err) {promptAction.showToast({ message: `跳轉(zhuǎn)失敗：code is ${err.code}, message is ${err.message}` })return;} else {promptAction.showToast({ message: `跳轉(zhuǎn)成功` })}})})Button('跳轉(zhuǎn)3').width(100).margin({ top: 10 }).onClick(() => {router.replaceUrl({ url: 'pages/HomePage' },router.RouterMode.Single, (err) => {if (err) {promptAction.showToast({ message: `跳轉(zhuǎn)失敗：code is ${err.code}, message is ${err.message}` })return;} else {promptAction.showToast({ message: `跳轉(zhuǎn)成功` })}})})}.width('100%')}.height('100%')}
}

HomePage.ets

import router from '@ohos.router';
import promptAction from '@ohos.promptAction';@Entry
@Component
struct HomePage {@State message: string = 'HomePage'@State msg: string = '';onPageShow() {// 獲取傳遞過來的參數(shù)對象const params = router.getParams();if (params != null && this.msg != null) {// 獲取info屬性的值this.msg = params['msg'];} else {this.msg = '沒有參數(shù)傳遞過來'}}build() {Row() {Column() {Text(this.msg).fontSize(20)Button('返回上一頁').onClick(() => {router.back()})Button('返回指定頁面').margin({ top: 10 }).onClick(() => {router.back({url: 'pages/Index'})})Button('頁面返回詢問框').margin({ top: 10 }).onClick(() => {// 調(diào)用router.showAlertBeforeBackPage()方法，設(shè)置返回詢問框的信息try {router.showAlertBeforeBackPage({message: '您還沒有完成支付，確定要返回嗎？' // 設(shè)置詢問框的內(nèi)容});} catch (err) {console.error(`Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}`);}router.back()})Button('頁面返回詢問框自定義').margin({ top: 10 }).onClick(() => {// 彈出自定義的詢問框promptAction.showDialog({message: '您還沒有完成支付，確定要返回嗎？',buttons: [{text: '取消',color: '#FF0000'},{text: '確認(rèn)',color: '#0099FF'}]}).then((result) => {if (result.index === 0) {// 用戶點擊了“取消”按鈕console.info('User canceled the operation.');} else if (result.index === 1) {// 用戶點擊了“確認(rèn)”按鈕console.info('User confirmed the operation.');// 調(diào)用router.back()方法，返回上一個頁面router.back();}}).catch((err) => {console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`);})})}.width('100%')}.height('100%')}
}

為了能讓大家更好的學(xué)習(xí)鴻蒙 (OpenHarmony) 開發(fā)技術(shù)，這邊特意整理了《鴻蒙 (OpenHarmony)開發(fā)學(xué)習(xí)手冊》（共計890頁），希望對大家有所幫助：https://qr21.cn/FV7h05

《鴻蒙?(OpenHarmony)開發(fā)學(xué)習(xí)手冊》：https://qr21.cn/FV7h05

入門必看：https://qr21.cn/FV7h05
1.? 應(yīng)用開發(fā)導(dǎo)讀(ArkTS)
2.? ……

HarmonyOS?概念：https://qr21.cn/FV7h05

1. 系統(tǒng)定義
2. 技術(shù)架構(gòu)
3. 技術(shù)特性
4. 系統(tǒng)安全

如何快速入門：https://qr21.cn/FV7h05
1.? 基本概念
2.? 構(gòu)建第一個ArkTS應(yīng)用
3.? 構(gòu)建第一個JS應(yīng)用
4.? ……

開發(fā)基礎(chǔ)知識：https://qr21.cn/FV7h05
1.? 應(yīng)用基礎(chǔ)知識
2.? 配置文件
3.? 應(yīng)用數(shù)據(jù)管理
4.? 應(yīng)用安全管理
5.? 應(yīng)用隱私保護
6.? 三方應(yīng)用調(diào)用管控機制
7.? 資源分類與訪問
8.? 學(xué)習(xí)ArkTS語言
9.? ……

基于ArkTS?開發(fā)：https://qr21.cn/FV7h05
1.? Ability開發(fā)
2.? UI開發(fā)
3.? 公共事件與通知
4.? 窗口管理
5.? 媒體
6.? 安全
7.? 網(wǎng)絡(luò)與鏈接
8.? 電話服務(wù)
9.? 數(shù)據(jù)管理
10.? 后臺任務(wù)(Background?Task)管理
11.? 設(shè)備管理
12.? 設(shè)備使用信息統(tǒng)計
13.? DFX
14.? 國際化開發(fā)
15.? 折疊屏系列
16.? ……