HO與OH差異之Navigation三

在上一篇內容中我們介紹了HO與OH差異之Navigator，我們也了解了Navigator的基本概念和大致了解了一下他的基礎用法，既然談到差異肯定就不止這兩種差異，今天就讓我們來了解第三種差異NavRouter，其中在HO中我們并沒有這種路由方式但是在OH中我們就存在這種路由方式。

首先我們先介紹一下NavRouter的基本概念

NavRouter: 導航組件，默認提供點擊響應處理，不需要開發者自定義點擊事件邏輯。

也就是說它也是天然的支持進行跳轉，但是真的會有這么簡單嗎？

其中肯定有些必要的條件在這其中：

必須包含兩個子組件，其中第二個子組件必須為NavDestination。

子組件個數異常時：

有且僅有1個時，觸發路由到NavDestination的能力失效。

有且僅有1個時，且使用NavDestination場景下，不進行路由。

大于2個時，后續的子組件不顯示。

第二個子組件不為NavDestination時，觸發路由功能失效。

也就是說其實它的這種能力是實現我們在一個開發的頁面進行兩個頁面的跳轉，什么意思呢？其實就是相當于我們在同一個屋子里造了兩間房這個意思。不用我們再單獨的購入另外一個屋子。換成我們這邊的思路就是我們只需要在一個@Entry頁面進行開發，另外一個可以是組件，這就是一種性能優化上的體現。他不進行深度的拷貝。

接下來我們上示例：

typescript
@Entry
@Component
struct NavRouterPage {

? build() {
??? NavRouter() {
????? Column() {
??????? Button("點擊我進行跳轉到下一個路由")
????? }
????? NavDestination() {
??????? Text("我是點擊跳轉后的頁面")
????? }.title("NavDestination")
??? }
??? .mode(NavRouteMode.PUSH)
? }
}

如上代碼，與圖片！！翻車了嗎難道？為什么無法進行跳轉？

似乎差點就要被搞懵逼了，但是我們仔細想想NavRouter只是一個導航組件，它還是要有依賴的，依賴他的大哥“Navigation”，跳轉的組件是NavDestination，從一開始學習我們就知道Navigation與NavDestination是相互搭配使用的，此時我們加上Navigation的效果如下:

typescript
@Entry
@Component
struct NavRouterPage {

? build() {
??? Navigation() {
????? NavRouter() {
??????? Column() {
????????? Button("點擊我進行跳轉到下一個路由")
??????? }
??????? NavDestination() {
????????? Text("我是點擊跳轉后的頁面")
??????? }.title("NavDestination")
????? }
????? .mode(NavRouteMode.PUSH)
??? }
? }
}

在外層加個Navigation就可以進行跳轉了。其中NavRouter還有很多的屬性可以讓我們進行使用，其中我演示代碼中的mode就是其中之一，主要功能是配置跳轉的方式。

其中NavRouter除了可以使用推薦的寫法外我們還可以進行自定義的跳轉，我們可以進行配置NavRouter的參數進行跳轉，NavRouter(value: RouteInfo)。

但是這種方式就和我們一開始使用Navigation有點類似，需要注冊一個路由棧然后通過路由棧進行跳轉，示例如下：
?

typescript
@Entry
@Component
struct NavRouterPage {

? build() {
??? Navigation() {
????? NavRouter({ name: "NavRouterPage2" }) {
??????? Column() {
????????? Button("點擊我進行跳轉到下2頁面")
??????? }
????? }
????? .mode(NavRouteMode.PUSH)
??? }
? }
}

typescript
@Builder
function NavRouterPage2Builder() {
? NavRouterPage2()
}

@Entry
@Component
struct NavRouterPage2 {

? build() {
??? NavDestination() {
????? Text("我是NavDestination2頁面")
??? }.title("NavDestination2")
? }
}

Harmony OS? NEXT? / OpenHarmony? API12

本次就暫時介紹這么多，在下一篇內容中我會給大家介紹一下樣式復用的修飾器

謝謝各位的觀看，有錯誤不足的地方，本人樂于接受各位的意見

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/76102.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/76102.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/76102.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！