《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》課件 第6章 路由和組件導(dǎo)航

第6章路由和組件導(dǎo)航《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》學(xué)習(xí)目標(biāo)/Target掌握頁(yè)面跳轉(zhuǎn)，能夠通過(guò)路由實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)掌握頁(yè)面返回，能夠通過(guò)路由實(shí)現(xiàn)頁(yè)面返回掌握在頁(yè)面返回前詢問(wèn)，能夠在頁(yè)面返回前彈出一個(gè)詢問(wèn)對(duì)話框掌握跨模塊的頁(yè)面跳轉(zhuǎn)，能夠?qū)崿F(xiàn)跨模塊的頁(yè)面跳轉(zhuǎn)學(xué)習(xí)目標(biāo)/Target熟悉組件導(dǎo)航，能夠描述ArkUI中的組件導(dǎo)航功能掌握Navigation組件的使用方法，能夠使用Navigation組件制作導(dǎo)航頁(yè)掌握NavPathStack對(duì)象的使用方法，能夠通過(guò)NavPathStack對(duì)象實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)章節(jié)概述/Summary路由和組件導(dǎo)航是鴻蒙應(yīng)用開發(fā)中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的兩種方式。其中，路由提供了一些方法用于實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，組件導(dǎo)航則是通過(guò)Navigation組件制作導(dǎo)航頁(yè)，并為導(dǎo)航頁(yè)添加子頁(yè)跳轉(zhuǎn)功能，通過(guò)子頁(yè)跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。本章將對(duì)路由和組件導(dǎo)航進(jìn)行詳細(xì)講解。目錄/Contents6.16.2路由組件導(dǎo)航6.3階段案例——設(shè)置中心頁(yè)面路由6.16.1.1頁(yè)面跳轉(zhuǎn)

先定一個(gè)小目標(biāo)！掌握頁(yè)面跳轉(zhuǎn)，能夠通過(guò)路由實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)6.1.1頁(yè)面跳轉(zhuǎn)頁(yè)面跳轉(zhuǎn)是指從一個(gè)頁(yè)面導(dǎo)航到另一個(gè)頁(yè)面，并且可以將數(shù)據(jù)從一個(gè)頁(yè)面?zhèn)鬟f到另一個(gè)頁(yè)面。下面演示一個(gè)購(gòu)物軟件的頁(yè)面跳轉(zhuǎn)過(guò)程，如下圖所示。6.1.1頁(yè)面跳轉(zhuǎn)在鴻蒙應(yīng)用中，路由負(fù)責(zé)管理不同頁(yè)面之間的跳轉(zhuǎn)和參數(shù)傳遞，它基于輕量級(jí)的棧式管理結(jié)構(gòu)，每個(gè)頁(yè)面都有唯一的標(biāo)識(shí)符，所有被訪問(wèn)過(guò)的頁(yè)面都會(huì)被放置在頁(yè)面棧中。每當(dāng)頁(yè)面跳轉(zhuǎn)時(shí)，路由會(huì)根據(jù)標(biāo)識(shí)符對(duì)頁(yè)面進(jìn)行入?；虺鰲２僮?，實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和管理。6.1.1頁(yè)面跳轉(zhuǎn)頁(yè)面棧是一個(gè)后進(jìn)先出的數(shù)據(jù)結(jié)構(gòu)，用于存儲(chǔ)鴻蒙應(yīng)用中打開的頁(yè)面。頁(yè)面棧的頂部始終是當(dāng)前頁(yè)，而其他頁(yè)面則按照它們被打開的順序排列在下面。頁(yè)面棧的最大容量為32個(gè)頁(yè)面。若超出此限制，可能會(huì)導(dǎo)致應(yīng)用程序出現(xiàn)異常行為，例如頁(yè)面無(wú)法正常壓入頁(yè)面?；驘o(wú)法正常返回等。為了避免超出頁(yè)面棧的最大容量，可以在頁(yè)面跳轉(zhuǎn)時(shí)，選擇適當(dāng)?shù)捻?yè)面跳轉(zhuǎn)模式。6.1.1頁(yè)面跳轉(zhuǎn)路由功能通過(guò)router對(duì)象（或稱為router模塊）來(lái)實(shí)現(xiàn)，該對(duì)象有兩種導(dǎo)入方式。第1種導(dǎo)入方式如下。第2種導(dǎo)入方式如下。以上兩種導(dǎo)入方式的效果相同。importrouterfrom'@ohos.router';import{router}from'@kit.ArkUI';6.1.1頁(yè)面跳轉(zhuǎn)router對(duì)象提供了pushUrl()方法和replaceUrl()方法，這兩個(gè)方法都可以實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，它們的區(qū)別在于目標(biāo)頁(yè)是否會(huì)替換當(dāng)前頁(yè)。方法說(shuō)明pushUrl()目標(biāo)頁(yè)不會(huì)替換當(dāng)前頁(yè)，而是將當(dāng)前頁(yè)壓入頁(yè)面棧以保留當(dāng)前頁(yè)的狀態(tài)，跳轉(zhuǎn)后可以通過(guò)返回操作回到當(dāng)前頁(yè)。這種模式適用于常規(guī)的頁(yè)面導(dǎo)航，例如從一個(gè)列表頁(yè)跳轉(zhuǎn)到詳情頁(yè)replaceUrl()目標(biāo)頁(yè)會(huì)替換當(dāng)前頁(yè)，當(dāng)前頁(yè)會(huì)被銷毀并釋放資源。跳轉(zhuǎn)后無(wú)法通過(guò)返回操作回到當(dāng)前頁(yè)。這種模式適用于需要替換當(dāng)前頁(yè)的場(chǎng)景，例如在登錄成功后直接跳轉(zhuǎn)到主頁(yè)6.1.1頁(yè)面跳轉(zhuǎn)pushUrl()方法的基本語(yǔ)法格式如下。①options參數(shù)是一個(gè)對(duì)象，用于設(shè)置目標(biāo)頁(yè)的描述信息，該對(duì)象有兩個(gè)屬性：url屬性表示目標(biāo)頁(yè)的路徑。params屬性表示傳遞的參數(shù)。如果傳遞了參數(shù)，則在目標(biāo)頁(yè)中可以通過(guò)調(diào)用router對(duì)象的getParams()方法來(lái)獲取傳遞過(guò)來(lái)的參數(shù)。如果不需要傳遞參數(shù)，可以省略params屬性。router.pushUrl(options,mode?,callback?);6.1.1頁(yè)面跳轉(zhuǎn)②mode參數(shù)是可選的，用于設(shè)置跳轉(zhuǎn)頁(yè)面使用的模式，包括標(biāo)準(zhǔn)實(shí)例模式router.RouterMode.Standard和單實(shí)例模式router.RouterMode.Single，它們的區(qū)別在于是否會(huì)新建目標(biāo)頁(yè)，默認(rèn)使用標(biāo)準(zhǔn)實(shí)例模式，兩種模式的說(shuō)明如下表所示。模式說(shuō)明標(biāo)準(zhǔn)實(shí)例模式每次跳轉(zhuǎn)都會(huì)新建一個(gè)目標(biāo)頁(yè)并壓入棧頂。這種模式適用于需要在同一URL下展示不同內(nèi)容或狀態(tài)的場(chǎng)景，例如博客的不同文章頁(yè)面單實(shí)例模式如果目標(biāo)頁(yè)已經(jīng)在頁(yè)面棧中，則離棧頂最近的同URL頁(yè)面會(huì)被移動(dòng)到棧頂并重新加載；如果目標(biāo)頁(yè)不存在，則按照標(biāo)準(zhǔn)實(shí)例模式跳轉(zhuǎn)。這種模式適用于需要保持頁(yè)面狀態(tài)一致性的場(chǎng)景，例如購(gòu)物軟件的商品詳情頁(yè)面6.1.1頁(yè)面跳轉(zhuǎn)③callback參數(shù)是可選的，用于處理成功或失敗情況的回調(diào)函數(shù)。如果省略了mode參數(shù)，callback參數(shù)可作為第2個(gè)參數(shù)。注意跳轉(zhuǎn)的頁(yè)面必須是被@Entry裝飾的組件，并且該頁(yè)面必須注冊(cè)到entry/src/main/resources/base/profile/main_page.json文件中。6.1.1頁(yè)面跳轉(zhuǎn)當(dāng)pushUrl()方法跳轉(zhuǎn)失敗時(shí)，通常會(huì)返回一個(gè)錯(cuò)誤碼，表示跳轉(zhuǎn)失敗的具體原因。pushUrl()方法的常見(jiàn)錯(cuò)誤碼及其說(shuō)明如下表所示。錯(cuò)誤碼說(shuō)明100001內(nèi)部錯(cuò)誤，可能是未成功獲取渲染引擎或解析參數(shù)失敗等原因?qū)е碌?。需要檢查代碼邏輯或參數(shù)設(shè)置，確保跳轉(zhuǎn)操作能正確執(zhí)行100002路由頁(yè)面跳轉(zhuǎn)時(shí)輸入的路徑錯(cuò)誤或不存在。需要確保跳轉(zhuǎn)的目標(biāo)頁(yè)路徑正確，并且在路由配置中正確注冊(cè)了該頁(yè)面100003跳轉(zhuǎn)頁(yè)面壓入頁(yè)面數(shù)量超過(guò)32。在這種情況下，可以考慮優(yōu)化頁(yè)面導(dǎo)航邏輯，減少頁(yè)面數(shù)量6.1.1頁(yè)面跳轉(zhuǎn)replaceUrl()方法與pushUrl()方法的參數(shù)相同，兩者接收相同的參數(shù)格式。當(dāng)replaceUrl()方法跳轉(zhuǎn)失敗時(shí)，通常會(huì)返回一個(gè)錯(cuò)誤碼，表示跳轉(zhuǎn)失敗的具體原因。replaceUrl()方法的常見(jiàn)錯(cuò)誤碼及其說(shuō)明如下表所示。錯(cuò)誤碼說(shuō)明100001內(nèi)部錯(cuò)誤，可能是未成功獲取渲染引擎或解析參數(shù)失敗等原因?qū)е碌?。需要檢查代碼邏輯或參數(shù)設(shè)置，確保跳轉(zhuǎn)操作正確執(zhí)行200002路由頁(yè)面替換時(shí)輸入的路徑錯(cuò)誤或不存在。需要確保跳轉(zhuǎn)的目標(biāo)頁(yè)路徑正確，并且在路由配置中正確注冊(cè)了該頁(yè)面6.1.1頁(yè)面跳轉(zhuǎn)下面演示如何使用pushUrl()方法實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)并傳遞參數(shù)以及處理錯(cuò)誤。6.1.1頁(yè)面跳轉(zhuǎn)在頁(yè)面跳轉(zhuǎn)時(shí)，可能有多個(gè)頁(yè)面都需要相同的參數(shù)，此時(shí)可以將當(dāng)前頁(yè)面的所有參數(shù)全部傳遞給下一個(gè)頁(yè)面。多學(xué)一招：在頁(yè)面跳轉(zhuǎn)時(shí)傳遞所有參數(shù)6.1.1頁(yè)面跳轉(zhuǎn)假設(shè)有A、B、C、D這4個(gè)頁(yè)面，現(xiàn)在想要在A頁(yè)面跳轉(zhuǎn)到B頁(yè)面時(shí)傳遞所有參數(shù)，在B頁(yè)面跳轉(zhuǎn)到C頁(yè)面時(shí)傳遞所有參數(shù)，在C頁(yè)面跳轉(zhuǎn)到D頁(yè)面時(shí)傳遞所有參數(shù)，那么可以在每個(gè)頁(yè)面發(fā)生跳轉(zhuǎn)時(shí)，通過(guò)router對(duì)象的getParams()方法獲取當(dāng)前頁(yè)面的參數(shù)，將所有參數(shù)全部傳遞過(guò)去，示例代碼如下。多學(xué)一招：在頁(yè)面跳轉(zhuǎn)時(shí)傳遞所有參數(shù)router.pushUrl({url:'目標(biāo)頁(yè)路徑',params:router.getParams()});6.1.2頁(yè)面返回

先定一個(gè)小目標(biāo)！掌握頁(yè)面返回，能夠通過(guò)路由實(shí)現(xiàn)頁(yè)面返回6.1.2頁(yè)面返回當(dāng)用戶在一個(gè)頁(yè)面完成操作后，可能需要返回到上一個(gè)頁(yè)面或者返回到指定頁(yè)面，這就需要用到頁(yè)面返回功能。在返回的過(guò)程中可以傳遞數(shù)據(jù)。6.1.2頁(yè)面返回router對(duì)象的back()方法用于實(shí)現(xiàn)頁(yè)面返回功能，這個(gè)方法會(huì)將用戶導(dǎo)航到上一個(gè)頁(yè)面，而且不會(huì)重新初始化上一個(gè)頁(yè)面，因此上一個(gè)頁(yè)面的狀態(tài)和數(shù)據(jù)都會(huì)被保留。6.1.2頁(yè)面返回back()方法的基本語(yǔ)法格式如下。options是一個(gè)可選參數(shù)，該參數(shù)是一個(gè)對(duì)象，用于設(shè)置返回頁(yè)的描述信息。它有url屬性和params屬性。url屬性表示返回頁(yè)面的路徑。params屬性表示傳遞的參數(shù)。如果省略options參數(shù)，則表示返回到上一個(gè)頁(yè)面。如果傳遞了options參數(shù)并且傳遞了返回頁(yè)面的路徑，則表示返回到指定頁(yè)面。如果傳遞了params屬性，則在返回頁(yè)中可以通過(guò)調(diào)用router對(duì)象的getParams()方法來(lái)獲取傳遞過(guò)來(lái)的參數(shù)。如果不需要傳遞參數(shù)，則可以省略params屬性。router.back(options?);6.1.2頁(yè)面返回下面演示如何使用back()方法實(shí)現(xiàn)頁(yè)面返回并傳遞參數(shù)。6.1.3在頁(yè)面返回前詢問(wèn)

先定一個(gè)小目標(biāo)！掌握在頁(yè)面返回前詢問(wèn)，能夠在頁(yè)面返回前彈出一個(gè)詢問(wèn)對(duì)話框6.1.3在頁(yè)面返回前詢問(wèn)在開發(fā)頁(yè)面返回功能時(shí)，為了避免用戶誤點(diǎn)擊“返回”按鈕導(dǎo)致當(dāng)前頁(yè)面的數(shù)據(jù)丟失，需要在用戶從一個(gè)頁(yè)面返回到另一個(gè)頁(yè)面之間，彈出一個(gè)詢問(wèn)對(duì)話框，讓用戶確認(rèn)是否要執(zhí)行返回操作。6.1.3在頁(yè)面返回前詢問(wèn)在頁(yè)面返回前增加詢問(wèn)對(duì)話框的方式包括：使用內(nèi)置詢問(wèn)對(duì)話框使用自定義詢問(wèn)對(duì)話框下面分別進(jìn)行講解。6.1.3在頁(yè)面返回前詢問(wèn)1.使用內(nèi)置詢問(wèn)對(duì)話框router對(duì)象的showAlertBeforeBackPage()方法用于實(shí)現(xiàn)在返回時(shí)彈出詢問(wèn)對(duì)話框的功能。在調(diào)用back()方法之前，可以通過(guò)調(diào)用showAlertBeforeBackPage()方法啟用詢問(wèn)對(duì)話框，啟用后，當(dāng)調(diào)用back()方法時(shí)，詢問(wèn)對(duì)話框就會(huì)自動(dòng)彈出。6.1.3在頁(yè)面返回前詢問(wèn)showAlertBeforeBackPage()方法的基本語(yǔ)法格式如下。options參數(shù)是一個(gè)對(duì)象，該對(duì)象包含message屬性，該屬性為string類型，用于設(shè)置詢問(wèn)對(duì)話框的信息。如果調(diào)用成功，則會(huì)啟用詢問(wèn)對(duì)話框。如果調(diào)用失敗，則會(huì)拋出異常，可以通過(guò)try…catch語(yǔ)句捕獲異常，通過(guò)e.code和e.message獲取錯(cuò)誤碼和錯(cuò)誤信息。router.showAlertBeforeBackPage(options);6.1.3在頁(yè)面返回前詢問(wèn)在彈出的詢問(wèn)對(duì)話框中，會(huì)顯示“取消”和“確定”選項(xiàng)。如果選擇“取消”，將使頁(yè)面停留在當(dāng)前頁(yè)；如果選擇“確定”，就會(huì)返回上一個(gè)頁(yè)面，并根據(jù)參數(shù)決定如何執(zhí)行跳轉(zhuǎn)。注意無(wú)法獲取用戶單擊的是“確定”還是“取消”，因?yàn)檫x擇的結(jié)果是由詢問(wèn)對(duì)話框本身進(jìn)行處理的。6.1.3在頁(yè)面返回前詢問(wèn)下面通過(guò)一個(gè)例子演示詢問(wèn)對(duì)話框的使用方法。在頁(yè)面中定義一個(gè)按鈕，實(shí)現(xiàn)當(dāng)用戶單擊該按鈕時(shí)，彈出一個(gè)詢問(wèn)對(duì)話框，詢問(wèn)用戶是否確認(rèn)放棄付款。6.1.3在頁(yè)面返回前詢問(wèn)2.使用自定義詢問(wèn)對(duì)話框自定義詢問(wèn)對(duì)話框可以使用promptAction對(duì)象實(shí)現(xiàn)。使用該對(duì)象的showDialog()方法可以實(shí)現(xiàn)類似使用showAlertBeforeBackPage()方法啟用詢問(wèn)對(duì)話框的效果，并可以獲取用戶點(diǎn)擊的是哪個(gè)按鈕，從而在用戶點(diǎn)擊后執(zhí)行相應(yīng)的邏輯。6.1.3在頁(yè)面返回前詢問(wèn)下面通過(guò)一個(gè)例子演示如何自定義詢問(wèn)對(duì)話框。6.1.3在頁(yè)面返回前詢問(wèn)除了前面講到的pushUrl()方法、replaceUrl()方法、getParams()方法、back()方法、showAlertBeforeBackPage()方法外，router還提供了其他的方法。多學(xué)一招：Router對(duì)象提供的其他方法方法說(shuō)明clear()清空頁(yè)面棧中的所有歷史頁(yè)面，僅保留當(dāng)前頁(yè)面作為棧頂頁(yè)面getLength()獲取當(dāng)前頁(yè)面棧的數(shù)量getState()獲取當(dāng)前頁(yè)面的狀態(tài)信息pushNamedRoute()跳轉(zhuǎn)到指定的命名路由頁(yè)面hideAlertBeforeBackPage()在頁(yè)面返回時(shí)禁用詢問(wèn)對(duì)話框replaceNamedRoute()用指定的命名路由頁(yè)面替換當(dāng)前頁(yè)面，并銷毀被替換的頁(yè)面6.1.4跨模塊的頁(yè)面跳轉(zhuǎn)

先定一個(gè)小目標(biāo)！掌握跨模塊的頁(yè)面跳轉(zhuǎn)，能夠?qū)崿F(xiàn)跨模塊的頁(yè)面跳轉(zhuǎn)6.1.4跨模塊的頁(yè)面跳轉(zhuǎn)在實(shí)際開發(fā)中，一個(gè)項(xiàng)目可能會(huì)有多個(gè)模塊，有時(shí)需要實(shí)現(xiàn)跨模塊的頁(yè)面跳轉(zhuǎn)，也就是從一個(gè)模塊的頁(yè)面跳轉(zhuǎn)到另一個(gè)模塊的頁(yè)面。6.1.4跨模塊的頁(yè)面跳轉(zhuǎn)鴻蒙應(yīng)用中的路由支持跨模塊跳轉(zhuǎn)，并且有基于地址跳轉(zhuǎn)和基于命名路由跳轉(zhuǎn)兩種方式，下面分別進(jìn)行講解。6.1.4跨模塊的頁(yè)面跳轉(zhuǎn)1.基于地址跳轉(zhuǎn)通過(guò)為router對(duì)象的pushUrl()方法傳遞地址信息可以實(shí)現(xiàn)跨模塊的頁(yè)面跳轉(zhuǎn)，地址的語(yǔ)法格式內(nèi)容如下。①包名：可以從項(xiàng)目根目錄下的AppScope/app.json5文件中獲取。在該文件中，bundleName配置項(xiàng)的值就是包名。②模塊名：可以從項(xiàng)目根目錄下的build-profile.json5文件中獲取，在該文件中找到modules數(shù)組，里面定義的每個(gè)對(duì)象對(duì)應(yīng)一個(gè)模塊，對(duì)象的name屬性的值就是模塊名。③頁(yè)面文件名：可以從“模塊名/src/main/ets/pages”目錄下獲取頁(yè)面文件名，不要加.ets后綴。@bundle:包名/模塊名/ets/pages/頁(yè)面文件名6.1.4跨模塊的頁(yè)面跳轉(zhuǎn)下面演示如何基于地址跳轉(zhuǎn)，實(shí)現(xiàn)從entry模塊的ModeRouter1頁(yè)面跳轉(zhuǎn)到library模塊的Index頁(yè)面。6.1.4跨模塊的頁(yè)面跳轉(zhuǎn)2.基于命名路由跳轉(zhuǎn)命名路由是指為一個(gè)頁(yè)面的路徑進(jìn)行命名，命名后可通過(guò)名稱找到對(duì)應(yīng)的頁(yè)面。定義命名路由的語(yǔ)法格式如下。在@Entry裝飾器基礎(chǔ)上添加了命名路由，routeName屬性的值就是當(dāng)前頁(yè)面的路由名稱。@Entry({routeName:'名稱'})6.1.4跨模塊的頁(yè)面跳轉(zhuǎn)若要跳轉(zhuǎn)到命名路由，可以通過(guò)如下方式進(jìn)行跳轉(zhuǎn)。若要實(shí)現(xiàn)跨模塊跳轉(zhuǎn)，還需要在entry目錄下的oh-package.json5文件中配置依賴的模塊信息，并使用import()函數(shù)導(dǎo)入要跳轉(zhuǎn)的頁(yè)面。router.pushNamedRoute({name:'名稱'});6.1.4跨模塊的頁(yè)面跳轉(zhuǎn)下面演示如何基于命名路由跳轉(zhuǎn)，實(shí)現(xiàn)從entry模塊的ModeRouter2頁(yè)面跳轉(zhuǎn)到library模塊的Pay頁(yè)面。組件導(dǎo)航6.26.2.1初識(shí)組件導(dǎo)航

先定一個(gè)小目標(biāo)！熟悉組件導(dǎo)航，能夠描述ArkUI中的組件導(dǎo)航功能6.2.1初識(shí)組件導(dǎo)航ArkUI中的組件導(dǎo)航功能包含兩個(gè)重要的組件：Navigation組件和NavDestination組件，它們分別用于實(shí)現(xiàn)導(dǎo)航頁(yè)和子頁(yè)。導(dǎo)航頁(yè)用于放置導(dǎo)航項(xiàng)。子頁(yè)用于顯示導(dǎo)航項(xiàng)對(duì)應(yīng)的內(nèi)容。6.2.1初識(shí)組件導(dǎo)航導(dǎo)航頁(yè)由標(biāo)題欄（包含菜單欄）、內(nèi)容區(qū)和工具欄組成，Navigation組件的子組件會(huì)顯示在內(nèi)容區(qū)。子頁(yè)由標(biāo)題欄（包含菜單欄）、內(nèi)容區(qū)組成，NavDestination組件的子組件會(huì)顯示在內(nèi)容區(qū)。6.2.1初識(shí)組件導(dǎo)航組件導(dǎo)航有3種顯示模式，分別是單欄模式、分欄模式和自適應(yīng)模式，默認(rèn)采用自適應(yīng)模式，在該模式下，組件會(huì)根據(jù)設(shè)備寬度動(dòng)態(tài)調(diào)整布局。當(dāng)設(shè)備屏幕寬度小于或等于520vp時(shí)，組件導(dǎo)航采用單欄模式。當(dāng)設(shè)備屏幕寬度大于520vp時(shí)，組件導(dǎo)航采用分欄模式。單欄模式分欄模式6.2.2Navigation組件

先定一個(gè)小目標(biāo)！掌握Navigation組件的使用方法，能夠使用Navigation組件制作導(dǎo)航頁(yè)6.2.2Navigation組件Navigation組件用于實(shí)現(xiàn)導(dǎo)航頁(yè)，該組件提供了一些屬性，用于設(shè)置導(dǎo)航頁(yè)的顯示效果。6.2.2Navigation組件1.title屬性title屬性用于設(shè)置標(biāo)題欄中的頁(yè)面標(biāo)題，示例代碼如下。Navigation().title('主頁(yè)')6.2.2Navigation組件2.titleMode屬性titleMode屬性用于設(shè)置標(biāo)題欄的模式。標(biāo)題欄默認(rèn)位于頁(yè)面的頂部，用于展示頁(yè)面的名稱及操作按鈕，例如，“返回”按鈕、“菜單”按鈕等。標(biāo)題欄有兩個(gè)常用的模式，分別是Full模式和Mini模式。6.2.2Navigation組件（1）Full模式Full模式的標(biāo)題欄通常會(huì)占據(jù)頁(yè)面頂部的全部寬度，并在垂直方向上具有較大的高度，適用于頁(yè)面需要突出標(biāo)題的場(chǎng)景。Full模式是標(biāo)題欄的默認(rèn)模式，不需要手動(dòng)設(shè)置。如果要手動(dòng)設(shè)置，可以將titleMode屬性設(shè)置為NavigationTitleMode.Full，示例代碼如下。Navigation().title('主頁(yè)').titleMode(NavigationTitleMode.Full)6.2.2Navigation組件（2）Mini模式Mini模式的標(biāo)題欄會(huì)縮小標(biāo)題文本的字號(hào)，適用于頁(yè)面不需要突出標(biāo)題的場(chǎng)景。將titleMode屬性設(shè)置為NavigationTitleMode.Mini即可將標(biāo)題欄設(shè)置為Mini模式，示例代碼如下。Navigation().title('主頁(yè)').titleMode(NavigationTitleMode.Mini)6.2.2Navigation組件3.mode屬性mode屬性用于設(shè)置組件導(dǎo)航的顯示模式，即單欄模式、分欄模式和自適應(yīng)模式。（1）單欄模式將mode屬性設(shè)置為NavigationMode.Stack，即可將Navigation組件設(shè)置為單欄模式，示例代碼如下。Navigation().mode(NavigationMode.Stack)6.2.2Navigation組件（2）分欄模式將mode屬性設(shè)置為NavigationMode.Split，即可將Navigation組件設(shè)置為分欄模式，示例代碼如下。Navigation().mode(NavigationMode.Stack)（3）自適應(yīng)模式自適應(yīng)模式是默認(rèn)模式，不需要手動(dòng)設(shè)置。如果要手動(dòng)設(shè)置，可以將mode屬性設(shè)置為NavigationMode.Auto，示例代碼如下。Navigation().mode(NavigationMode.Auto)6.2.2Navigation組件4.menus屬性menu屬性用于設(shè)置菜單欄，該屬性需要傳遞一個(gè)由NavigationMenuItem對(duì)象組成的數(shù)組，每個(gè)NavigationMenuItem對(duì)象代表一個(gè)菜單項(xiàng)，包含菜單項(xiàng)的文本、圖標(biāo)等信息。豎屏?xí)r菜單欄最多支持顯示3個(gè)圖標(biāo)，橫屏?xí)r最多支持顯示5個(gè)圖標(biāo)，多余的圖標(biāo)會(huì)被放入自動(dòng)生成的“”圖標(biāo)被點(diǎn)擊后彈出的菜單中。6.2.2Navigation組件使用menus屬性設(shè)置菜單欄。菜單欄在豎屏中的效果如下。菜單欄在橫屏中的效果如下。6.2.2Navigation組件5.toolbarConfiguration屬性toolbarConfiguration屬性用于設(shè)置工具欄，該屬性需要傳入一個(gè)由ToolbarItem對(duì)象組成的數(shù)組。每個(gè)ToolbarItem對(duì)象代表一個(gè)工具欄項(xiàng)，包括工具欄的文本、圖標(biāo)等信息。工具欄在豎屏中最多支持顯示5個(gè)圖標(biāo)，多余的圖標(biāo)會(huì)被放入自動(dòng)生成的“”圖標(biāo)被點(diǎn)擊后彈出的菜單中。在橫屏中，工具欄會(huì)自動(dòng)隱藏，同時(shí)工具欄所有選項(xiàng)移動(dòng)至菜單欄中。6.2.2Navigation組件使用toolbarConfiguration屬性設(shè)置工具欄。工具欄在豎屏中的效果如下。工具欄在橫屏中的效果如下。6.2.2Navigation組件除了前面講到的title屬性、titleMode屬性、mode屬性、menus屬性、toolbarConfiguration屬性外，Navigation組件還提供了其他的屬性，具體如下表所示。多學(xué)一招：Navigation組件提供的其他屬性屬性說(shuō)明hideTitleBar表示是否隱藏標(biāo)題欄，默認(rèn)值為false，表示不隱藏標(biāo)題欄；設(shè)置為true時(shí)表示隱藏標(biāo)題欄hideBackButton表示是否隱藏標(biāo)題欄中的返回鍵，默認(rèn)值為false，表示顯示返回鍵；設(shè)置為true時(shí)表示隱藏返回鍵。返回鍵僅針對(duì)titleMode為NavigationTitleMode.Mini時(shí)有效hideNarBar表示是否隱藏導(dǎo)航欄，默認(rèn)值為false，表示顯示導(dǎo)航欄，設(shè)置為true時(shí)表示隱藏導(dǎo)航欄hideToolBar表示是否隱藏工具欄，默認(rèn)值為false，表示顯示工具欄；設(shè)置為true時(shí)表示隱藏工具欄6.2.3NavPathStack對(duì)象

先定一個(gè)小目標(biāo)！掌握NavPathStack對(duì)象的使用方法，能夠通過(guò)NavPathStack對(duì)象實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)6.2.3NavPathStack對(duì)象NavPathStack對(duì)象提供了頁(yè)面管理的能力，它基于頁(yè)面棧進(jìn)行操作，使用它可以切換頁(yè)面中要顯示的子頁(yè)，從而實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。6.2.3NavPathStack對(duì)象創(chuàng)建NavPathStack對(duì)象的代碼為“newNavPathStack()”。當(dāng)創(chuàng)建了NavPathStack對(duì)象后，需要將它作為參數(shù)傳遞給Navigation組件，從而將NavPathStack對(duì)象與Navigation組件關(guān)聯(lián)起來(lái)。6.2.3NavPathStack對(duì)象NavPathStack對(duì)象搭配Navigation組件的navDestination屬性可以實(shí)現(xiàn)子頁(yè)的跳轉(zhuǎn)。navDestination屬性用于定義子頁(yè)，它需要傳入一個(gè)由@Builder裝飾的自定義構(gòu)建函數(shù)。在編寫自定義構(gòu)建函數(shù)時(shí)有兩個(gè)注意點(diǎn)，具體如下。①自定義構(gòu)建函數(shù)可以接收兩個(gè)參數(shù)：name和param。name表示子頁(yè)的名稱，param表示傳給子頁(yè)的參數(shù)。②自定義構(gòu)建函數(shù)中的內(nèi)容為子頁(yè)的內(nèi)容，子頁(yè)的內(nèi)容必須放在NavDestination組件內(nèi)。在自定義構(gòu)建函數(shù)中可以通過(guò)判斷name的值來(lái)控制相應(yīng)子頁(yè)的顯示。6.2.3NavPathStack對(duì)象NavPathStack對(duì)象的常用方法如下表所示。方法說(shuō)明pushPath()將指定的子頁(yè)壓入棧pushPathByName()將指定名稱的子頁(yè)壓入棧replacePath()將棧頂?shù)淖禹?yè)彈出棧，將指定的子頁(yè)壓入棧replacePathByName()將棧頂?shù)淖禹?yè)彈出棧，將指定名稱的子頁(yè)壓入棧pop()將棧頂?shù)淖禹?yè)彈出棧popToName()回退到指定名稱的子頁(yè)，該子頁(yè)是由棧底開始的第一個(gè)符合指定名稱的子頁(yè)6.2.3NavPathStack對(duì)象pushPath()方法的語(yǔ)法格式如下。info是一個(gè)包含4個(gè)屬性的對(duì)象，用于設(shè)置頁(yè)面信息，具體如下。①name：表示要顯示的子頁(yè)的名稱。②param：可選屬性，表示傳給子頁(yè)的參數(shù)。③onPop：可選屬性，表示當(dāng)pop()或與其類似的方法被調(diào)用時(shí)執(zhí)行的回調(diào)函數(shù)。④isEntry：可選屬性，用于標(biāo)記是否為入口子頁(yè)。animated是可選參數(shù)，表示是否有轉(zhuǎn)場(chǎng)動(dòng)畫，默認(rèn)值為true，表示有轉(zhuǎn)場(chǎng)動(dòng)畫，設(shè)為false表示沒(méi)有轉(zhuǎn)場(chǎng)動(dòng)畫。pushPath(info,animated?)6.2.3NavPathStack對(duì)象pushPathByName()方法的語(yǔ)法格式如下。參數(shù)name、param、onPop、animated的含義與pushPath()方法中的相同。當(dāng)省略onPop時(shí)，animated可作為第3個(gè)參數(shù)。pushPathByName(name,param,onPop?,animated?)6.2.3NavPathStack對(duì)象pop()方法的語(yǔ)法格式如下。參數(shù)result表示頁(yè)面自定義處理結(jié)果。animated是可選參數(shù)，表示是否有轉(zhuǎn)場(chǎng)動(dòng)畫。pop(result,animated?)6.2.3NavPathStack對(duì)象popToName()方法的語(yǔ)法格式如下。參數(shù)name表示要回退的子頁(yè)的名稱；參數(shù)result、animated的含義與pop()方法中的相同。popToName(name,result,animated?)6.2.3NavPathStack對(duì)象下面演示如何使用NavPathStack對(duì)象實(shí)現(xiàn)子頁(yè)的跳轉(zhuǎn)。6.2.3NavPathStack對(duì)象Navigator是一個(gè)路由容器組件，提供路由跳轉(zhuǎn)能力。該組件的參數(shù)是一個(gè)對(duì)象，該對(duì)象包含兩個(gè)參數(shù)，具體如下。①target：用于指定跳轉(zhuǎn)目標(biāo)頁(yè)面的路徑。②type：指定路由方式，其可選值如下。NavigationType.Push：默認(rèn)值，表示跳轉(zhuǎn)到應(yīng)用內(nèi)的指定頁(yè)面。NavigationType.Replace：表示使用應(yīng)用內(nèi)的某個(gè)頁(yè)面替換當(dāng)前頁(yè)面，被替換的頁(yè)面會(huì)被銷毀。NavigationType.Back：表示返回到指定的頁(yè)面。當(dāng)指定的頁(yè)面在頁(yè)面棧中不存在時(shí)不響應(yīng)。未傳入指定頁(yè)面時(shí)返回上一頁(yè)。多學(xué)一招：Navigator組件6.2.3NavPathStack對(duì)象Navigator組件可以包含子組件，當(dāng)Navigator組件的子組件被點(diǎn)擊時(shí)，就會(huì)執(zhí)行路由跳轉(zhuǎn)。為Navigator組件設(shè)置onClick事件，可以在Navigator組件被點(diǎn)擊時(shí)執(zhí)行特定操作。Navigator組件的示例代碼如下。多學(xué)一招：Navigator組件Navigator({target:'pages/TargetPage'}){Button('跳轉(zhuǎn)')}6.2.4路由表

先定一個(gè)小目標(biāo)！掌握路由表，將所有的子頁(yè)放到一個(gè)表中進(jìn)行統(tǒng)一管理6.2.4路由表在上一小節(jié)實(shí)現(xiàn)了子頁(yè)跳轉(zhuǎn)，但是這些子頁(yè)全部在同一個(gè)頁(yè)面文件中，不利于管理。若要讓每個(gè)子頁(yè)單獨(dú)保存在一個(gè)頁(yè)面文件中，可以通過(guò)路由表來(lái)實(shí)現(xiàn)。路由表用于將所有的子頁(yè)放到一個(gè)表中進(jìn)行統(tǒng)一管理。6.2.4路由表在entry/src/main/module.json5文件中的module配置項(xiàng)中添加如下代碼可以配置路由表。routerMap配置項(xiàng)用于配置路由表，其值$profile:router_map表示將entry/src/main/resources/base/profile目錄下的router_map.json文件作為路由表加載。"routerMap":"$profile:router_map"6.2.4路由表router_map.json文件的語(yǔ)法格式如下。在配置了路由表后，不需要為Navigation組件設(shè)置navDestination屬性，即可通過(guò)NavPathStack對(duì)象完成頁(yè)面跳轉(zhuǎn)。{"routerMap":[{"name":"子頁(yè)的名稱","pageSourceFile":"子頁(yè)的文件路徑（從src開始）","buildFunction":"子頁(yè)中導(dǎo)出的自定義構(gòu)建函數(shù)名稱"},……]}6.2.4路由表下面演示如何通過(guò)路由表實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。6.2.5攔截器

先定一個(gè)小目標(biāo)！掌握攔截器，能夠?qū)崿F(xiàn)在頁(yè)面跳轉(zhuǎn)時(shí)進(jìn)行攔截6.2.5攔截器在開發(fā)中，有時(shí)需要在