簡介
在應用開發(fā)時，我們常常遇到伶唯，需要在應用內(nèi)多頁面跳轉場景時中使用Navigation導航組件做統(tǒng)一的頁面跳轉管理恤左，它提供了一系列屬性方法來設置頁面的標題欄蔓肯、工具欄以及菜單欄的各種展示樣式遭铺。除此之外還擁有動態(tài)加載丽柿，navPathStack路由跳轉漱贱。
本文就以Navigation頁面切換范例為例暮蹂，來展開講解Navigation以上的技術點，幫助開發(fā)者快速學習调限。
場景概述
ArkUI中涂召，應用內(nèi)導航組件Navigation一般作為Page頁面的根容器幔睬， Navigation組件主要包含主頁和內(nèi)容頁。
主頁內(nèi)容區(qū)默認首頁顯示導航內(nèi)容(Navigation的子組件) 或非首頁顯示(NavDestination的子組件)芹扭，首頁和非首頁通過路由進行切換。
Navigation的路由切換的方式有兩種赦抖，本次示例主要介紹NavPathStack的使用舱卡。
- 在API Version 9上，首頁導航內(nèi)容需要配合NavRouter組件實現(xiàn)頁面路由队萤。
- 從API Version 10開始轮锥，首頁推薦使用NavPathStack配合NavDestination屬性進行頁面路由。
通過本篇文章的學習要尔，你將學會：
1.如何使用NavPathStack路由轉場
2.如何在Navigation中跨包引用hsp
3.如何在Navigation中使用動態(tài)加載
Router與Navigation適用場景對比
| 組件 | 適用場景 | 特點 | 轉場動畫效果對比 |
|---|---|---|---|
| Router | 模塊間與模塊內(nèi)頁面切換 | 通過每個頁面的url實現(xiàn)模塊間解耦 | 頁面平推轉場效果 |
| Navigation | 模塊內(nèi)頁面切換 | 通過組件級路由統(tǒng)一路由管理 | 向右折疊轉場效果 |
使用NavPathStack路由轉場
-
NavPathStack有兩種路由切換方法舍杜，一種是pushPath新娜，如主頁---->設置頁面，通過使用this.pageStack.pushPath({ name: url })進行跳轉既绩，另外一種是pushPathByName概龄，如主頁---->詳情頁面，通過使用this.pageStack.pushPathByName(name, item)進行跳轉饲握，其中item為需要傳遞的參數(shù)私杜。
NavPathStack支持pop、move救欧、clear方法的使用衰粹；pop方法的作用是彈出路由棧棧頂元素，如首頁進入商品詳情頁面笆怠，在詳情頁面使用this.pageStack.pop()方法返回到首頁铝耻，clear方法的作用是清除棧中所有頁面， 如首頁跳轉到詳情頁面蹬刷，詳情頁面再進入直播頁面瓢捉，在直播頁面通過使用this.pageStack.clear()直接返回到首頁。除此之外箍铭，還有popTo(回退路由棧到第一個名為name的NavDestination頁面)泊柬、 popToIndex(回退路由棧到index指定的NavDestination頁面)、moveToTop(將第一個名為name的NavDestination頁面移到棧頂)诈火、moveIndexToTop(將index指定的NavDestination頁面移到棧頂)方法, 由于本示例暫時沒有合適的按鈕去承載這些功能兽赁，所以本示例未體現(xiàn)。
路由棧信息,如下所示
獲取棧中所有NavDestination頁面的名稱：this.pageInfos.getAllPathName()
獲取index指定的NavDestination頁面的參數(shù)信息：this.pageInfos.getParamByIndex(1)
獲取全部名為name的NavDestination頁面的參數(shù)信息：this.pageInfos.getParamByName('pageTwo')
獲取全部名為name的NavDestination頁面的位置索引：this.pageInfos.getIndexByName('pageOne')
獲取棧大欣涫亍：this.pageInfos.size()
實現(xiàn)思路
通過this.pageStack.pushPath({ name: url param: item })進行頁面之間的跳轉刀崖，navpathstack詳情。
開發(fā)步驟
通過onclick事件調(diào)用NavPathStack.pushPath方法跳轉頁面拍摇。源碼參考MainPage.ets
Column()
.onClick(() => {
this.pageStack.pushPath({ name: listData.moduleName, param: listData.param });
})
