当前位置：首页 > article >正文

HO与OH差异之Navigation三

article 2025/3/30 17:58:42

在上一篇内容中我们介绍了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")
}
}