前面四篇系列笔记，我们依次掌握了ArkTS五大基础布局、全套基础UI组件、@State响应式状态管理、onClick/onChange两大核心交互事件。截至目前，我们已经可以独立编写结构完整、样式美观、可人机交互的单页面应用。

但日常使用的手机APP，没有任何一款是只有一个页面的：首页、详情页、登录页、个人中心页之间都需要相互切换跳转。想要实现多页面之间的无缝切换，就必须学习鸿蒙核心能力——Router页面路由。

本篇博客结合本人课堂全部实战路由代码：RouterDemo.ets、Index.ets/Index2.ets（应用首页入口）、PageOne.ets（跳转页面），从零讲解路由核心概念、两种跳转模式、页面正向传参、页面返回、路由栈原理、开发常见报错与解决方案，搭配全套可直接运行的多页面源码，打通ArkTS单页面到多页面应用的最后一环。

一、路由Router基础核心认知

1. 什么是鸿蒙路由Router？

鸿蒙ArkTS采用页面栈机制管理所有打开的页面：每打开一个新页面，页面就会压入路由栈；每返回上一页，栈顶页面就会出栈销毁，自动释放内存，保证APP运行流畅。

没有路由，所有功能只能堆砌在一个页面中，代码臃肿且无法拆分功能模块；合理使用路由可以做到：

• 实现页面正向跳转、反向返回

• 跨页面传递数据，比如首页向详情页传递用户名、ID

• 控制页面生命周期

2. 本次课程全部路由文件分工说明

3. 路由前置必备配置（新手必看，不配置直接报错）

鸿蒙所有页面想要实现路由跳转，必须提前在ohm-url.json文件中注册页面路径，路径名称必须和代码中跳转地址完全一致，大小写敏感。

本次项目注册页面路径如下：

{

 "pages": [

   "pages/index/Index",

   "pages/router/PageOne",

   "pages/router/Second",

   "pages/router/RouterDemo"

  ]

}

4.Index 页面视频播放核心代码实现（ArkTS）

（1） 完整源码（Index.ets）

@Entry
@Component
struct Index {
  private videoSrc: Resource = $rawfile('bb.mp4')
  private pict:Resource=$r('app.media.first')
  private controller:VideoController =new VideoController()

  build() {
    Column() {
      Video({
        //src用来设置视频资源
        src: this.videoSrc,
        previewUri: this.pict,
        //控制器，控制前进后退的按钮等
        controller:this.controller
      })
        .height('50%')
        //是否静音
        .muted(true)
        //循环播放
        .loop(true)//自动播放
        .autoPlay(false)
        .controls(true)
    }
    .width('100%')
    .height('100%')
  }
}

（2）布局约束

• 外层 Column 占满全屏宽高；
• Video 组件高度设置为页面高度的 50%，宽度铺满容器。

（3） 运行配置说明

1. 将视频文件bb.mp4放到 entry/src/main/resources/rawfile/ 文件夹内；
2. 封面图片放到 entry/src/main/resources/base/media/ 目录；
3. 在 DevEco Studio 预览器或者真机模拟器中运行当前 Index 页面，即可看到带封面、带控制条的视频播放器。

5.实际案例

二、鸿蒙Router两种核心跳转方式（重难点区分）

鸿蒙官方提供两种最常用的页面跳转API，二者底层路由栈逻辑完全不同，适用场景也有明显区别，也是学习和考试的高频考点：

1. router.pushUrl() 保留当前页面跳转

• 执行逻辑：保留当前首页，将新页面压入路由栈，形成页面层级

• 特点：可以返回上一页，点击返回按钮就能回到原页面

• 适用场景：首页跳转详情页、列表跳转内容页（日常开发90%场景都用它）

2. router.replaceUrl() 替换当前页面跳转

• 执行逻辑：关闭当前页面，用新页面直接替换页面

• 页面栈变化：[首页] → [PageOne]

• 特点：无法返回上一页

• 适用场景：登录成功后跳转首页、开屏页跳转主页（不需要回到之前页面）

三、进阶实战：路由跨页面传参（核心重难点）

实际开发中，跳转页面往往需要携带数据：比如首页点击用户卡片，跳转详情页并传递用户名、年龄、账号信息。Router支持在跳转时携带自定义参数，目标页面直接接收使用。

1.注册页面示例（输入信息点击注册，到达第一个页面PageOne)

2.如需登录，点击下方小字“已有账号？立即登录”到达登陆页面(如需返回注册页面，按下方“没有账号？立即注册”跳转至注册页面)

3.输入账号密码，点击登录，到达第一个页面PageOne

五、本篇博客总结

• 两大核心跳转：pushUrl保留页面可返回，replaceUrl销毁页面不可返回

• 代码优化：减少冗余代码

• 核心逻辑：点击事件触发路由跳转，路由实现页面切换，状态管理页面数据