前一篇頁面跳轉(zhuǎn)邏輯為了省事使用的Router相關(guān)api實現(xiàn)跳轉(zhuǎn)，由于Rouer接口在跨模塊業(yè)務(wù)或者一多效果相關(guān)場景存在明顯的局限性，而且頁面跳轉(zhuǎn)有數(shù)量限制等原因，官方明確不再推薦使用Router，所以我也替換為Navigation，本文簡單介紹一下該接口的特點和使用方法陈肛。
Navigation和Navigator的區(qū)別
- Navigation組件：是路由導(dǎo)航的根視圖容器，一般作為Page頁面的根容器使用兄裂。相關(guān)的api比較多句旱，詳見官方文檔。
典型用法：
build() {
Navigation() {
// ...
}
.mode(NavigationMode.Auto)
}
- Navigator組件：路由容器組件晰奖，提供路由跳轉(zhuǎn)能力前翎，詳見官方文檔。
典型用法：
build() {
Column() {
Navigator({ target: 'pages/container/navigator/Navigator', type: NavigationType.Back }) {
Text('Return to Navigator Page').width('100%').textAlign(TextAlign.Center)
}
}.width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
}
很多初學(xué)者對Navigator和Navigation傻傻分不清畅涂，但其實它們的用法還是有很大區(qū)別的港华。
Navigation初認識
Navigation作為路由導(dǎo)航的根視圖，主要有兩種頁面布局模式：單視圖午衰、分欄視圖立宜，默認為自適應(yīng)模式。也就是根據(jù)頁面寬度動態(tài)判斷單視圖還是分欄視圖臊岸，這對一多開發(fā)很友好橙数，也是Navigation的一大特點。具體來講帅戒，就是當(dāng)頁面寬度大于等于一定閾值( API version 9及以前：520vp灯帮，API version 10及以后：600vp )時，Navigation組件采用分欄模式逻住，反之采用單欄模式钟哥。
Navigation作為根視圖，通過傳入一個頁面棧對象瞎访，實現(xiàn)路由跳轉(zhuǎn)腻贰。 Navigation路由相關(guān)的操作都是基于頁面棧NavPathStack提供的方法進行，每個Navigation都需要創(chuàng)建并傳入一個NavPathStack對象扒秸，用于管理頁面播演。主要涉及頁面跳轉(zhuǎn)、頁面返回伴奥、頁面替換写烤、頁面刪除、參數(shù)獲取拾徙、路由攔截等功能洲炊。
例如Index作為項目主入口，點擊Button，調(diào)用NavPathStack的api實現(xiàn)跳轉(zhuǎn)选浑。
@Entry
@Component
struct Index {
// 創(chuàng)建一個頁面棧對象并傳入Navigation
pageStack: NavPathStack = new NavPathStack()
build() {
Navigation(this.pageStack) {
Button('Push DialogPage')
.margin(20)
.width('80%')
.onClick(() => {
this.pageStack.pushPathByName('DialogPage', '');
})
}
.title('Main')
}
}
跳轉(zhuǎn)到新的頁面PageSecond
@Component
export struct DialogPage {
@Consume('NavPathStack') pageStack: NavPathStack;
build() {
NavDestination() {
Stack({ alignContent: Alignment.Center }) {
Column() {
Text("Dialog NavDestination")
.fontSize(20)
.margin({ bottom: 100 })
}
}.height("100%").width('100%')
}
.backgroundColor('rgba(0,0,0,0.5)')
.hideTitleBar(true)
.mode(NavDestinationMode.DIALOG)
}
}
Router切換Navigation
- 明確跳轉(zhuǎn)頁面和目標(biāo)跳轉(zhuǎn)頁面
主頁面：
目標(biāo)頁面：
-
在resources/base/profile/route_map.json添加路由。
image.png
-
在module.json5文件中添加"routerMap": "$profile:route_map"
image.png
至此玄叠，關(guān)于Navigation的簡單介紹及使用方法就講完了古徒，更多api或特性的應(yīng)用請看官方文檔。
