頁面路由與組件導(dǎo)航匯報人:Kimi時間:2025.01.01目錄/CONTENTS01頁面路由與組件導(dǎo)航概述02頁面和自定義組件生命周期03頁面路由（router）04組件導(dǎo)航（Navigation）05Tabs組件06本章小結(jié)頁面路由與組件導(dǎo)航概述01概念與優(yōu)勢頁面路由定義頁面路由用于應(yīng)用程序中不同頁面之間的跳轉(zhuǎn)和數(shù)據(jù)傳遞，通過不同的URL地址實現(xiàn)頁面切換。組件導(dǎo)航定義組件導(dǎo)航支持在組件內(nèi)部進(jìn)行跳轉(zhuǎn)，具備更強的一次開發(fā)多端部署能力，可靈活管理頁面棧。優(yōu)勢組件導(dǎo)航提供更靈活的頁面棧操作、豐富的動效和生命周期管理，推薦使用。頁面和自定義組件生命周期02頁面生命周期01onPageShow頁面每次顯示時觸發(fā)，包括路由過程、應(yīng)用進(jìn)入前臺等場景。02onPageHide頁面每次隱藏時觸發(fā)，包括路由過程、應(yīng)用進(jìn)入后臺等場景。03onBackPress用戶點擊返回按鈕時觸發(fā)，用于處理返回操作。組件生命周期aboutToAppear組件即將出現(xiàn)時回調(diào)，執(zhí)行build()函數(shù)之前觸發(fā)。01onDidBuild組件build()函數(shù)執(zhí)行完成后回調(diào)，適合進(jìn)行不影響UI的功能操作。02aboutToDisappear組件析構(gòu)銷毀之前執(zhí)行，不允許修改狀態(tài)變量。03頁面路由（router）03頁面跳轉(zhuǎn)與返回router.pushUrl目標(biāo)頁面不會替換當(dāng)前頁，而是壓入頁面棧，可保留當(dāng)前頁狀態(tài)并返回。router.replaceUrl目標(biāo)頁面會替換當(dāng)前頁并銷毀，無法返回到當(dāng)前頁。跳轉(zhuǎn)實例通過配置頁面路徑和裝飾器，實現(xiàn)頁面之間的跳轉(zhuǎn)和返回操作。同Ability下的頁面跳轉(zhuǎn)跳轉(zhuǎn)方式同一Ability下的頁面跳轉(zhuǎn)通過router模塊實現(xiàn)，支持多頁面管理。Ability定義Ability是包含UI的應(yīng)用組件，用于與用戶交互，一個應(yīng)用可包含多個Ability。不同Ability下的頁面跳轉(zhuǎn)Want對象使用Want對象指定跳轉(zhuǎn)的Ability信息，通過startAbility方法實現(xiàn)跳轉(zhuǎn)。跳轉(zhuǎn)實例創(chuàng)建新模塊并配置Ability信息，通過Want對象實現(xiàn)不同Ability之間的跳轉(zhuǎn)。頁面跳轉(zhuǎn)時的詢問框系統(tǒng)默認(rèn)詢問框使用router.showAlertBeforeBackPage方法設(shè)置返回詢問框，避免用戶誤操作。自定義詢問框使用promptAction.showDialog或自定義彈窗實現(xiàn)更靈活的詢問框。頁面跳轉(zhuǎn)時的數(shù)據(jù)傳遞數(shù)據(jù)傳遞方式使用router.pushUrl或replaceUrl方法，通過params傳遞數(shù)據(jù)。數(shù)據(jù)獲取使用router.getParams()方法獲取傳遞的數(shù)據(jù)，支持頁面間數(shù)據(jù)交互。組件導(dǎo)航（Navigation）04基本概念定義組件導(dǎo)航主要用于頁面間及組件內(nèi)部的跳轉(zhuǎn)，支持靈活的頁面棧操作。屬性支持設(shè)置標(biāo)題、隱藏標(biāo)題欄、布局模式等屬性。頁面與組件間跳轉(zhuǎn)與返回01跳轉(zhuǎn)方法使用NavPathStack對象管理頁面棧，通過pushPathByName等方法實現(xiàn)跳轉(zhuǎn)。02返回方法使用pop()方法返回上一頁，支持靈活的頁面管理。03跳轉(zhuǎn)實例配置系統(tǒng)路由表，通過Builder函數(shù)實現(xiàn)頁面與組件之間的跳轉(zhuǎn)。頁面與組件間的數(shù)據(jù)傳遞數(shù)據(jù)傳遞使用getParamByName方法獲取傳遞的數(shù)據(jù)，支持頁面與組件間的數(shù)據(jù)交互。傳遞實例在頁面跳轉(zhuǎn)時傳遞參數(shù)，通過getParamByName獲取數(shù)據(jù)并顯示。Tabs組件0501定義Tabs組件用于在一個頁面內(nèi)快速切換視圖內(nèi)容，提升頁面空間利用率。02布局包含TabContent和TabBar兩部分，支持頂部、底部、側(cè)邊導(dǎo)航布局。03屬性支持設(shè)置頁簽位置、布局模式、是否縱向等屬性。Tabs組件概述Tabs導(dǎo)航布局01頂部導(dǎo)航適用于內(nèi)容分類較多的場景，方便用戶快速切換。02底部導(dǎo)航應(yīng)用中最常見的導(dǎo)航方式，方便用戶單手操作。03側(cè)邊導(dǎo)航適用于橫屏界面，用于對應(yīng)用進(jìn)行導(dǎo)航操作。Tabs導(dǎo)航布局限制導(dǎo)航欄滑動切換在多級分類頁面中，限制底部導(dǎo)航的滑動切換，避免沖突。固定導(dǎo)航欄當(dāng)內(nèi)容分類固定時，使用固定導(dǎo)航欄，不可滾動。Ability內(nèi)頁面的跳轉(zhuǎn)和數(shù)據(jù)傳遞頁面跳轉(zhuǎn)使用router模塊實現(xiàn)頁面跳轉(zhuǎn)，支持多頁面管理。數(shù)據(jù)傳遞使用params傳遞數(shù)據(jù)，通過router.getParams()獲取數(shù)據(jù)，支持頁面間數(shù)據(jù)交互。實戰(zhàn)案例以教學(xué)系統(tǒng)為例，實現(xiàn)師資介紹頁面的跳轉(zhuǎn)和數(shù)據(jù)傳遞，展示完整流程。本章小結(jié)06知識點回顧生命周期管理詳細(xì)說明了頁面和自定義組件的生命周期，包括各個生命周期接口的作用。頁面路由與組件導(dǎo)航介紹了頁面路由和組件導(dǎo)航的基本概念、優(yōu)勢及使用場景。頁面跳轉(zhuǎn)與數(shù)據(jù)傳遞講解了頁面跳轉(zhuǎn)的方法、不同Ability下的跳轉(zhuǎn)、頁面跳轉(zhuǎn)時的詢問框及數(shù)據(jù)傳遞。組件導(dǎo)航與Tabs組件介紹了組件導(dǎo)航的使用、頁面與組件間的跳轉(zhuǎn)與數(shù)據(jù)傳遞、Tabs組件的布局及導(dǎo)航方式。習(xí)題選擇題