鸿蒙Next hmrouter如何使用

鸿蒙Next的hmrouter具体要怎么使用？有没有详细的操作步骤或者教程？我尝试配置但一直不成功，希望能得到一些指导。

2 回复

鸿蒙Next的hmrouter？简单说就是“导航仪”升级版！
在代码里import它，用Router.push()跳页面，Router.back()返回，传参像塞小纸条。
记住：别迷路，路由表配好就行！
（具体看官方文档，毕竟代码不会骗人，但我的比喻会😄）

更多关于鸿蒙Next hmrouter如何使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next中的hmrouter是用于页面路由管理的模块，支持页面跳转、参数传递和路由拦截。以下是基本使用方法：

1. 导入模块

import router from '@ohos.router';

2. 页面跳转

// 跳转到指定页面（无参数）
router.pushUrl({
  url: 'pages/Index'
})

// 带参数跳转
router.pushUrl({
  url: 'pages/Detail',
  params: { id: 123, name: '示例' }
})

3. 参数接收

在目标页面的onPageShow生命周期中获取参数：

onPageShow() {
  const params = router.getParams();
  console.log('接收参数:', params?.id);
}

4. 返回上一页

router.back();

5. 路由拦截（可选）

通过router.addInterceptor添加全局拦截器：

router.addInterceptor({
  // 跳转前触发
  beforeJump: (route) => {
    if(!isLogin) {
      // 重定向到登录页
      router.replaceUrl({url: 'pages/Login'})
      return false; // 阻止原跳转
    }
    return true;
  }
})

注意事项：

  • 需要在module.json5中提前注册页面路由
  • pushUrl会保留当前页到堆栈，replaceUrl会替换当前页
  • 参数传递需遵循序列化要求

建议参考官方路由文档获取更详细说明。

回到顶部