HarmonyOS 鸿蒙Next中外部组件如何做页面跳转

HarmonyOS 鸿蒙Next中外部组件如何做页面跳转

项目结构：

  1. 父组件 Layout 是在路由栈中的page，定义了NavDestionation.
  2. 子组件 Mine 是写在外部文件中的，通过引入方式调用。

问题：

如何在子组件中实现页面的跳转? (this.pathInfos.pushPathByName() 并不执行。)

代码截图：

父组件 Layout/Index.ets

父组件 Layout/Index.ets

子组件 Mine.ets

子组件 Mine.ets


更多关于HarmonyOS 鸿蒙Next中外部组件如何做页面跳转的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

方法1：可以在子组件中使用如下方法，获取父组件的NavPathStack；方法2：也可以在子组件中写一个回调，通过回调将点击事件传回父组件页面，从而实现页面跳转；方法3：使用@Provider()和@Consumer()装饰的参数监听该参数变化，根据@Monitor(‘参数名’)监听参数变化进行页面跳转

  1. pathStack: NavPathStack = new NavPathStack();
  2. aboutToAppear() {
  3. // this指代PageOne自定义节点，并从该节点向上查找其最近的一个类型为Navigation的父亲节点
  4. let navigationInfo: uiObserver.NavigationInfo | undefined = this.queryNavigationInfo();
  5. console.log('get navigationInfo: ’ + JSON.stringify(navigationInfo));
  6. if (navigationInfo !== undefined) {
  7. this.pathStack = navigationInfo.pathStack;
  8. }
  9. }

更多关于HarmonyOS 鸿蒙Next中外部组件如何做页面跳转的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


通过@Link装饰器实现父子组件间路由控制器的传递：

@Component
struct Layout {
  @State pathInfos: NavPathStack = new NavPathStack()

  build() {
    Navigation(this.pathInfos) {
      // 传递路由控制器给子组件
      Mine({ pathController: this.pathInfos })
    }
  }
}

// 子组件 Mine.ets
@Component
struct Mine {
  @Link pathController: NavPathStack

  build() {
    Button('跳转详情页')
      .onClick(() => {
        // 通过接收到的控制器操作路由
        this.pathController.pushPathByName('DetailPage')
      })
  }
}

已解决，

解决思路就是必须使用父组件定义的路由栈实例 new NavPathStack() 跳转。

方法其实有很多，我是使用@Provider @Consumer跨组件传参的方式，把父组件路由实例传入到子组件。

为什么不能在子组件中引入路由栈对象来执行跳转呢？？？还非得父组件路由才行。也太麻烦了。

方法如图：

cke_23798.png

cke_24216.png

在HarmonyOS Next中，外部组件实现页面跳转需使用router模块。步骤如下：

  1. 在module.json5中配置目标页面的路由信息：
"pages": {
  "MainPage": "pages/MainPage",
  "DetailPage": "pages/DetailPage"
}
  1. 在组件中调用路由API：
import router from '@ohos.router';
router.pushUrl({
  url: 'pages/DetailPage'
});

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

router.pushUrl({
  url: 'pages/DetailPage',
  params: {id: 123}
});

在HarmonyOS Next中，外部组件实现页面跳转的正确方式是使用路由管理器Router。根据您的代码结构，建议在子组件Mine.ets中这样实现：

  1. 首先确保在子组件中导入router模块：
import router from '@ohos.router'
  1. 修改跳转方法为：
router.pushUrl({
  url: 'pages/Setting'
})
  1. 在父组件Layout中，确保已正确配置路由：
// 在aboutToAppear或onPageShow中注册路由
router.addRoute({
  name: 'Setting',
  path: 'pages/Setting'
})

关键点说明：

  • 直接使用router模块而非pathInfos
  • 确保目标页面路径配置正确
  • 跳转前确认路由已注册

这种实现方式更符合HarmonyOS Next的路由规范，能确保跨组件跳转的可靠性。

回到顶部