鸿蒙Next中NavDestination子页面如何跳转到另一个子页面

在鸿蒙Next中，如何通过NavDestination实现子页面之间的跳转？比如从子页面A跳转到子页面B，是否需要重新配置导航路径或使用特定的API？求具体实现方法和示例代码。

2 回复

在鸿蒙Next中，子页面跳转就像导航迷路时换个方向——用NavDestination的navigate方法，传目标页的ID就行。简单说就是：navController.navigate(R.id.目标页面)。别走错路哦！

更多关于鸿蒙Next中NavDestination子页面如何跳转到另一个子页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，NavDestination子页面之间的跳转可以通过Navigator的push或replace方法实现。以下是具体步骤和示例代码：

核心方法

  1. 获取NavController：在子页面中通过getNavController()获取导航控制器。
  2. 调用导航方法：
    • push()：跳转到新页面并保留当前页面。
    • replace()：替换当前页面为目标页面。

示例代码

假设有两个子页面PageA和PageB，从PageA跳转到PageB：

// PageA.ets
import { NavDestination } from '@ohos.router';

@Entry
@Component
struct PageA {
  private navController: NavController = getNavController();

  build() {
    Column() {
      Button('跳转到PageB')
        .onClick(() => {
          // 通过push方法跳转
          this.navController.push({
            url: 'pages/PageB'  // PageB的路径
          });
        })
    }
  }
}

参数传递（可选）

若需传递参数，可在跳转时添加params：

this.navController.push({
  url: 'pages/PageB',
  params: { id: 123 }
});

注意事项

  • 确保目标页面已在main_pages.json中配置路由。
  • 使用replace()时当前页面会被销毁，适用于登录页等场景。
  • 通过pop()可返回上一页面。

此方案适用于同一导航栈内的子页面跳转，代码简洁且符合鸿蒙路由规范。

回到顶部