鸿蒙系统开发中路由使用详解

最新推荐文章于 2025-05-27 06:30:00 发布

原创最新推荐文章于 2025-05-27 06:30:00 发布 · 883 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #鸿蒙

鸿蒙专栏收录该内容

390 篇文章

订阅专栏

鸿蒙系统提供了两种主要的路由机制：传统的Router模块和组件化的Navigation容器。下面我将详细介绍这两种路由方式的使用方法、区别以及实际应用示例。

一、Router模块基础使用

Router是鸿蒙早期提供的页面路由模块，通过URL实现页面跳转和数据传递。

1. 基本跳转方法

Router提供了两种跳转模式：

import router from '@ohos.router';

// 1. pushUrl - 保留当前页，新页面压入栈
router.pushUrl({
  url: 'pages/DetailPage'
});

// 2. replaceUrl - 替换当前页，销毁当前页
router.replaceUrl({
  url: 'pages/LoginPage'
});

2. 实例模式

Router支持两种页面实例模式：

// Standard模式(默认) - 每次跳转都新建实例
router.pushUrl({
  url: 'pages/DetailPage'
}, router.RouterMode.Standard);

// Single模式 - 单实例，已存在则复用
router.pushUrl({
  url: 'pages/SettingPage'
}, router.RouterMode.Single);

3. 参数传递与接收

传递参数：

// 简单参数
router.pushUrl({
  url: 'pages/DetailPage',
  params: { id: 123, name: '商品1' }
});

// 复杂对象
interface Product {
  id: number;
  name: string;
}
const product: Product = { id: 1, name: '手机' };
router.pushUrl({
  url: 'pages/DetailPage',
  params: { product: JSON.stringify(product) }
});

接收参数：

// 在目标页面
onPageShow() {
  const params = router.getParams();
  const id = params['id'];
  const product: Product = JSON.parse(params['product']);
}

二、Navigation组件详解

Navigation是鸿蒙官方推荐的路由容器组件，相比Router功能更强大。

1. 基本结构

@Entry
@Component
struct Index {
  pageStack: NavPathStack = new NavPathStack()

  build() {
    Navigation(this.pageStack) {
      // 首页内容
      Button("点击跳转")
        .onClick(() => {
          this.pageStack.pushPath({ name: "DetailPage" })
        })
    }
    .title("首页") // 设置标题
  }
}

2. 目标页面配置

目标页面需要使用NavDestination作为根布局：

@Component
struct DetailPage {
  build() {
    NavDestination() {
      // 页面内容
      Text("详情页")
    }
  }
}

// 必须导出Builder函数
@Builder
export function DetailPageBuilder() {
  DetailPage()
}

3. 路由表配置

在module.json5中添加配置：

{
  "module": {
    "routerMap": "$profile:route_map"
  }
}

route_map.json内容：

{
  "routerMap": [
    {
      "name": "DetailPage",
      "pageSourceFile": "src/main/ets/pages/DetailPage.ets",
      "buildFunction": "DetailPageBuilder"
    }
  ]
}

三、高级路由功能

1. 路由守卫

可以实现全局拦截进行权限控制：

// 全局前置守卫
router.addBeforeHook((to, from, next) => {
  if (to.url === 'pages/ProfilePage' && !isLogin) {
    next({ url: 'pages/LoginPage' }) // 重定向
  } else {
    next() // 放行
  }
});

2. 动态路由

实现按需加载模块：

// 动态导入模块并跳转
await import(moduleName).then((result: ESObject) => {
  result.harInit(pageName);
  DynamicsRouter.getNavPathStack().pushPath({ name: builderName });
});

3. 自定义转场动画

Router的动画功能较基础，若需高级效果（如共享元素转场），建议使用Navigation组件：

import router from '@ohos.router';

// 跳转时设置动画
router.pushUrl({
  url: 'pages/DetailPage',
  //入场动画效果
  enterAnimation: {
    duration: 500,
    curve: Curve.EaseOut,
    type: RouteAnimation.SlideRight // 目标页从右侧滑入
  },
  //退场动画
  exitAnimation: {
    duration: 300,
    curve: Curve.Linear,
    type: RouteAnimation.SlideLeft // 当前页向左滑出
  }
});

//支持的动画类型:
//RouteAnimation.Slide：滑动效果（默认）。
//RouteAnimation.Translate：平移效果。
//RouteAnimation.Fade：淡入淡出效果。
//RouteAnimation.None：无动画。

四、Router与Navigation对比

特性	Router	Navigation
类型	API调用	组件容器
官方推荐	不再推荐	推荐使用
生命周期	标准页面生命周期	NavDestination特有生命周期
复杂UI支持	有限	支持标题栏、工具栏等
跨模块跳转	支持	更优支持
学习曲线	简单	较复杂
适用场景	简单跳转	复杂应用路由