一、介紹

頁面路由指在應用程序中實現不同頁面之間的跳轉和數據傳遞。HarmonyOS提供了Router模塊，通過不同的url地址，可以方便地進行頁面路由，輕松地訪問不同的頁面。

二、頁面跳轉

2.1、兩種跳轉模式：

• router.pushUrl()：目標頁不會替換當前頁，而是壓入頁面棧。這樣可以保留當前頁的狀態，并且可以通過返回鍵或者調用router.back()方法返回到當前頁。
• router.replaceUrl()：目標頁會替換當前頁，并銷毀當前頁。這樣可以釋放當前頁的資源，并且無法返回到當前頁。

2.2、兩種實例模式

• Standard：標準實例模式，也是默認情況下的實例模式。每次調用該方法都會新建一個目標頁，并壓入棧頂。

• Single：單實例模式。即如果目標頁的url在頁面棧中已經存在同url頁面，則離棧頂最近的同url頁面會被移動到棧頂，并重新加載；如果目標頁的url在頁面棧中不存在同url頁面，則按照標準模式跳轉。

2.3、使用步驟

2.3.1、導入Router模塊

import router from '@ohos.router';

2.3.2、利用router實現跳轉、返回等操作

2.3.2.1、不帶參數傳遞的場景

場景1：登錄頁跳轉到首頁，需要保留主頁在頁面棧中，以便返回時恢復狀態。

使用pushUrl()方法，并且使用Standard實例模式

import router from '@ohos.router'
@Entry
@Component
struct LoginPage {@State message: string = 'login'build() {Row() {Column({space:6}) {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button('跳轉到home頁面--pushUrl').fontSize(20).onClick(() =>{router.pushUrl({url:'pages/HomePage'},router.RouterMode.Standard,(err) => {if(err){console.log('路由失敗')}})})}.width('100%')}.height('100%')}
}

場景1中，登錄跳轉到首頁時，需要保證每次首頁存在于頁面棧中，在返回時直接回到登錄頁。?需要將示例模式更換成Single，即：router.RouterMode.Single

場景2：登錄頁跳轉到首頁，銷毀登錄頁，在返回時直接退出應用。

使用replaceUrl()方法，并且使用Standard實例模式

import router from '@ohos.router'
@Entry
@Component
struct LoginPage {@State message: string = 'login'build() {Row() {Column({space:6}) {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button('跳轉到home頁面--replaceUrl').fontSize(20).onClick(() =>{router.replaceUrl({url:'pages/HomePage'},router.RouterMode.Standard,(err) => {if(err){console.log('路由失敗')}})})}.width('100%')}.height('100%')}
}

場景2中，登錄跳轉到首頁時，如果已經存在了就不再新建首頁，直接跳轉到首頁。?需要將示例模式更換成Single，即：router.RouterMode.Single

2.3.2.2、帶參數傳遞的場景

如果需要在跳轉時傳遞一些數據給目標頁，則可以在調用Router模塊的方法時，添加一個params屬性，并指定一個對象作為參數。例如：

        Button('跳轉到home頁面--pushUrl').fontSize(20).onClick(() =>{router.pushUrl({url:'pages/HomePage',params:{id:1}},router.RouterMode.Standard,(err) => {if(err){console.log('路由失敗')}})})

在目標頁中，可以通過調用Router模塊的getParams()方法來獲取傳遞過來的參數。例如：

const params = router.getParams(); // 獲取傳遞過來的參數對象
const id = params['id']; // 獲取id屬性的值

三、頁面返回

3.1、三種返回方式

3.1.1、返回到上一個頁面。

router.back();

3.1.2、返回到指定頁面

router.back({url: 'pages/Info'
});

這種方式可以返回到指定頁面，需要指定目標頁的路徑。目標頁必須存在于頁面棧中才能夠返回。

3.1.3、返回到指定頁面，并傳遞自定義參數信息。

router.back({url: 'pages/Info',params: {id:1}
});

這種方式不僅可以返回到指定頁面，還可以在返回的同時傳遞自定義參數信息。這些參數信息可以在目標頁中通過調用router.getParams()方法進行獲取和解析。

在目標頁中，在需要獲取參數的位置調用router.getParams()方法即可，例如在onPageShow()生命周期回調中：

onPageShow() {const params = router.getParams(); // 獲取傳遞過來的參數對象const id = params['id']; // 獲取id屬性的值
}

四、頁面返回前增加一個詢問框

在開發應用時，為了避免用戶誤操作或者丟失數據，有時候需要在用戶從一個頁面返回到另一個頁面之前，彈出一個詢問框，讓用戶確認是否要執行這個操作。

4.1、系統默認詢問框

如果想要在目標界面開啟頁面返回詢問框，需要在調用router.back()方法之前，通過調用router.showAlertBeforeBackPage()方法設置返回詢問框的信息。

例如，在Home頁面中定義一個返回按鈕的點擊事件處理函數，點擊按鈕時彈出詢問框，點擊確定按鈕再返回到登錄頁

import router from '@ohos.router'
@Entry
@Component
struct HomePage {@State message: string = 'Home'@State params:any = router.getParams()build() {Row() {Column({space:6}) {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Text('接收login傳遞的id：' + this.params.id).fontSize(30).fontWeight(FontWeight.Bold)Button('返回到login頁面').fontSize(20).onClick(() => {router.showAlertBeforeBackPage({message:'確定返回到login頁面嗎？'})router.back()})}.width('100%')}.height('100%')}
}

其中，router.showAlertBeforeBackPage()方法接收一個對象作為參數，該對象包含以下屬性：

• message：string類型，表示詢問框的內容。

  當用戶點擊“返回”按鈕時，會彈出確認對話框，詢問用戶是否確認返回。選擇“取消”將停留在當前頁目標頁；選擇“確認”將觸發router.back()方法，并根據參數決定如何執行跳轉。

4.2、自定義詢問框

點擊按鈕時，調用彈窗的promptAction.showDialog()方法：

import router from '@ohos.router'
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct HomePage {@State message: string = 'Home'@State params:any = router.getParams()build() {Row() {Column({space:6}) {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Text('接收login傳遞的id：' + this.params.id).fontSize(30).fontWeight(FontWeight.Bold)Button('返回到login頁面').fontSize(20).onClick(() => {promptAction.showDialog({message:'確定返回到login頁面嗎？',buttons: [{text: '取消',color: '#FF0000'},{text: '確認',color: '#0099FF'}]}).then((result)=>{if(result.index === 0){// 用戶點擊了“取消”按鈕console.log('點擊了取消按鈕')}else if(result.index === 1){// 用戶點擊了“確認”按鈕console.log('用戶點擊了“確認”按鈕')// 調用router.back()方法，返回上一個頁面router.back();}}).catch(err => {console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`);})})}.width('100%')}.height('100%')}
}

當用戶點擊“返回”按鈕時，會彈出自定義的詢問框，詢問用戶是否確認返回。選擇“取消”將停留在當前頁目標頁；選擇“確認”將觸發router.back()方法，并根據參數決定如何執行跳轉。

最后：👏👏😊😊😊👍👍?