# Navagation基本用法

> Navigation組件是路由導(dǎo)航的根視圖容器，一般作為Page頁(yè)面的根容器使用，其內(nèi)部默認(rèn)包含了標(biāo)題欄，內(nèi)容欄和公工具欄，其中內(nèi)容區(qū)默認(rèn)首頁(yè)顯示導(dǎo)航內(nèi)容（Navigation的子組件）或非首頁(yè)顯示（NavDestination的子組件），首頁(yè)和非首頁(yè)通過(guò)路由進(jìn)行切換

* 使用Navigation跳轉(zhuǎn)的組件不需要再使用Entry來(lái)修飾，普通組件即可
* Navigation是一個(gè)導(dǎo)航組件，API9和API11的使用官方推薦方式各不相同

## 1. Navagation API9的用法-(Navigation-NavRouter-(其他組件+NavDestination的用法))

### 1. 1**導(dǎo)航組件層次關(guān)系**

| 組件 | 作用 | 層級(jí)規(guī)則 |
| ---------------- | ------------------------ | ------------------------- |
| `Navigation` | 管理所有導(dǎo)航頁(yè)面的根容器 | 必須包含多個(gè) `NavRouter` |
| `NavRouter` | 定義一個(gè)跳轉(zhuǎn)入口 | 必須配對(duì) `NavDestination` |
| `NavDestination` | 目標(biāo)頁(yè)面內(nèi)容 | |

### **1. **2 按鈕覆蓋問(wèn)題

- **代碼現(xiàn)象**：`跳轉(zhuǎn)B` 覆蓋 `跳轉(zhuǎn)A`
- **根本原因**：
在 `NavRouter` 內(nèi)部放置多個(gè)直接同級(jí)組件時(shí)，僅最后一個(gè)組件會(huì)被渲染。
- **ArkUI規(guī)則**：
一個(gè) `NavRouter` 只能關(guān)聯(lián) **一個(gè)觸發(fā)元素** (如Button)，如需多個(gè)跳轉(zhuǎn)需使用多個(gè) `NavRouter`。

### 1.3 代碼案例

```ts
@Entry
@Component
struct TestNavgationAPI9 {
build() {

Navigation() {
// --------------------- 第一跳轉(zhuǎn)入口 ---------------------
NavRouter() { // ? 觸發(fā)元素
Button('跳轉(zhuǎn)A')
Button('跳轉(zhuǎn)B') //放置的第二個(gè)界面會(huì)覆蓋第一個(gè)
//要跳轉(zhuǎn)的界面
NavDestination() { // ? 目標(biāo)頁(yè)面A
Image($r('app.media.Coverpeople'))
.width(50)
.aspectRatio(1)
// --------------------- 第二跳轉(zhuǎn)入口 ---------------------
NavRouter() { // ? 觸發(fā)元素
//第一個(gè)組件就是跳轉(zhuǎn)的
// --------------------- 第二跳轉(zhuǎn)入口 ---------------------
Text('我跳轉(zhuǎn)啦') // ? 目標(biāo)頁(yè)面B
NavDestination() {
Text('第三個(gè)界面') // ? 目標(biāo)頁(yè)面C
}

}

}

}

}
.height('100%')
.width('100%')
}
}
```

### 1.4 效果展示


## 2.Navagation 10的用法

### 2.1 路由棧自主管理

- `NavPathStack`

核心方法：

```ts
pushPath() // 壓入新頁(yè)面（保留前頁(yè)）
replacePath() // 替換當(dāng)前頁(yè)面（銷(xiāo)毀前頁(yè)）
pop() // 回到上一頁(yè)
```

### 2.2 頁(yè)面加載控制

- **`navDestination(builder)`**
通過(guò) `Builder` 函數(shù)動(dòng)態(tài)渲染路由目標(biāo)：

* 函數(shù)動(dòng)態(tài)渲染路由目標(biāo)：

```ts
.navDestination(this.navDesBuilder) // 動(dòng)態(tài)路由映射
```

```ts
@Builder
navDesBuilder(name: string) {
if (name === "pageTwo") {
NavgationChild02() // 根據(jù) name 組裝對(duì)應(yīng)頁(yè)面
}
}
```

### 2.3 跨組件通信

- `@Provide` 與 `@Consume` 裝飾器

```ts
// 父級(jí)定義提供值
@Provide navPathStack: NavPathStack = new NavPathStack()
// 子組件自動(dòng)獲取
@Consume navPathStack: NavPathStack
```

無(wú)需顯式傳遞，自動(dòng)向下注入。

### 2.4 實(shí)現(xiàn)步驟

#### 1. 自己管理頁(yè)面棧 創(chuàng)建一個(gè)頁(yè)面棧 （用@Provide修飾，方便跨組件使用）

```ts
@Provide
navPathStack: NavPathStack = new NavPathStack()
```

#### 2.將創(chuàng)建的頁(yè)面棧實(shí)例傳遞給主界面

* `ps`:這一步還是蠻關(guān)鍵的，很多頁(yè)面不展示就是這個(gè)原因

```ts
Navigation(this.navPathStack) {
Text('這是第一頁(yè)-首頁(yè)')
Button('去下一頁(yè)')
.onClick(() => {
this.navPathStack.pushPath({
name: 'pageOne'
})
})

}
.height('100%')
.width('100%')
```

#### 3.通過(guò) `Builder` 函數(shù)動(dòng)態(tài)渲染路由目標(biāo)

##### 1. 先創(chuàng)建一個(gè)自定義Builder

```ts
@Builder
myNavPathStackBuilder(name: string) {
//根據(jù)傳入的名字區(qū)渲染對(duì)應(yīng)的頁(yè)面
if (name === 'pageOne') {
Children01()

} else if (name === 'pageTwo') {
Children02()

} else if (name === 'pageThree') {
Children03()

}
}

```

##### 2. 傳入Builder

```ts
.navDestination(this.navDesBuilder)
```

* 不需要加括號(hào)，這里有個(gè)底層原因

1. **ArkUI 的 `navDestination` 機(jī)制**

- **設(shè)計(jì)邏輯**:框架需要在導(dǎo)航時(shí)動(dòng)態(tài)調(diào)用構(gòu)建函數(shù)生成頁(yè)面。若傳遞this.navDesBuilder()則：
- 代碼執(zhí)行時(shí)**立即運(yùn)行該函數(shù)**（而非按需調(diào)用）
- 返回結(jié)果可能為 `void` 或非組件類(lèi)型，導(dǎo)致**渲染異常**。

2. **`@Builder` 函數(shù)的特性**

- **延遲執(zhí)行**：`@Builder` 定義的 UI 編譯時(shí)會(huì)轉(zhuǎn)為**獨(dú)立閉包代碼塊**

- **調(diào)用時(shí)機(jī)**：由 導(dǎo)航框架 在需要時(shí)（如`pushPath`）根據(jù)name參數(shù)觸發(fā)構(gòu)建

```ts
this.navPathStack.pushPath({ name: 'pageTwo' });
// ?? 此時(shí) ArkUI 內(nèi)部通過(guò) `.navDestination` 關(guān)聯(lián)的 Builder 按需執(zhí)行
```

##### 3.跳轉(zhuǎn)的實(shí)現(xiàn)

1. 通過(guò)點(diǎn)擊事件調(diào)用當(dāng)前`navPathStack`實(shí)例`pushPath`方法
2. 傳入你要跳轉(zhuǎn)頁(yè)面的名字，進(jìn)行跳轉(zhuǎn)

```ts
Button('去下一頁(yè)')
.onClick(() => {
this.navPathStack.pushPath({
name: 'pageOne'
})
})
```

#### 4.子界面的定義

```ts
@Component
struct Children01 {
//接收主界面?zhèn)鬟f過(guò)來(lái)的頁(yè)面棧
@Consume navPathStack: NavPathStack
build() {
NavDestination() {
Column({ space: 5 }) {
Text('這是我從主頁(yè)跳轉(zhuǎn)的第一個(gè)界面')
.fontSize(24)
.fontWeight(500)
Button('跳轉(zhuǎn)到第二個(gè)頁(yè)面去')
.onClick(() => {
this.navPathStack.pushPath({
name: 'pageTwo'
})
})
}
}

}
}
@Component
struct Children02 {
@Consume
navPathStack: NavPathStack

build() {
NavDestination() {
Column({ space: 5 }) {
Text('這是我從主頁(yè)跳轉(zhuǎn)的第二個(gè)界面')
.fontSize(24)
.fontWeight(500)
Button('跳轉(zhuǎn)到第三個(gè)頁(yè)面去')
.onClick(() => {
this.navPathStack.pushPath({
name: 'pageThree'
})
})
}
}

}
}

@Component
struct Children03 {
@Consume
navPathStack: NavPathStack

build() {
NavDestination() {
Column() {
Text('這是我從主頁(yè)跳轉(zhuǎn)的第三個(gè)界面')
.fontSize(24)
.fontWeight(500)
}

}

}
}
```

#### 5.效果展示


## 3.NavagationAPI10使用的補(bǔ)充內(nèi)容

### 3.1 常見(jiàn)的API

| 配置組合 | 代碼示例 | 效果描述 |
| ----------------- | ------------------------------------------------------------ | ----------------------------------- |
| 默認(rèn)狀態(tài) | `Navigation() .title('主標(biāo)題')` | 標(biāo)題欄顯示 "主標(biāo)題"，采用 Free 模式 |
| 精簡(jiǎn)模式+隱藏標(biāo)題 | `Navigation() .titleMode(NavigationTitleMode.Mini) .hideTitleBar(true)` | 標(biāo)題欄完全不可見(jiàn) |
| 子頁(yè)面獨(dú)立配置 | `NavDestination() .title('子頁(yè)標(biāo)題') .hideTitleBar(true)` | |

### 3.2 傳參獲取參數(shù)的實(shí)現(xiàn)

#### 1.定義數(shù)據(jù)結(jié)構(gòu)

```ts
interface hobby {
name: string,
hobby: string
}
```

#### 2.即將跳轉(zhuǎn)頁(yè)面?zhèn)魅雲(yún)?shù)

```ts
NavDestination() {
Column({ space: 5 }) {
Text('這是我從主頁(yè)跳轉(zhuǎn)的第二個(gè)界面')
.fontSize(24)
.fontWeight(500)
Button('跳轉(zhuǎn)到第三個(gè)頁(yè)面去')
.onClick(() => {
this.navPathStack.pushPath({
name: 'pageThree',
param: { name: '貓貓球', hobby: '喜歡玩毛線球' } as hobby
})
})
}
}
```

#### 3.跳轉(zhuǎn)的頁(yè)面接收數(shù)據(jù)

```ts
@Component
struct Children03 {
@State
hobby: hobby[] = [] as hobby[]
@Consume
navPathStack: NavPathStack

aboutToAppear(): void {
this.hobby = this.navPathStack.getParamByName('pageThree') as hobby[]
promptAction.showToast({
message: JSON.stringify(this.hobby)
})
}

build() {
NavDestination() {
Column() {
Text('這是我從主頁(yè)跳轉(zhuǎn)的第三個(gè)界面')
Text('這是我獲取的數(shù)據(jù)')
Text(this.hobby[0].name)
Text(this.hobby[0].hobby)
.fontWeight(500)
}

}

}
}
```

#### 4.效果展示



審核編輯 黃宇