如何在鸿蒙中使用 Router 进行页面跳转

鸿蒙中使用 Router 进行页面跳转指南

最新推荐文章于 2025-10-24 18:22:17 发布

原创最新推荐文章于 2025-10-24 18:22:17 发布 · 1.1k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为

零基础学鸿蒙开发专栏收录该内容

447 篇文章

订阅专栏

你是不是也在想——“鸿蒙这么火，我能不能学会？”
答案是：当然可以！
这个专栏专为零基础小白设计，不需要编程基础，也不需要懂原理、背术语。我们会用最通俗易懂的语言、最贴近生活的案例，手把手带你从安装开发工具开始，一步步学会开发自己的鸿蒙应用。
不管你是学生、上班族、打算转行，还是单纯对技术感兴趣，只要你愿意花一点时间，就能在这里搞懂鸿蒙开发，并做出属于自己的App！
📌 关注本专栏《零基础学鸿蒙开发》，一起变强！
每一节内容我都会持续更新，配图+代码+解释全都有，欢迎点个关注，不走丢，我是小白酷爱学习，我们一起上路 🚀

全文目录：

概述：Router 的作用和使用

在现代移动应用开发中，页面跳转是一个必不可少的功能，特别是在复杂的应用中，如何进行页面之间的跳转、管理页面的栈、以及合理的路由策略，直接影响了应用的用户体验和维护性。鸿蒙系统作为华为推出的操作系统，它也为开发者提供了便捷的页面跳转管理工具——Router。

Router 是鸿蒙系统中用于页面跳转的核心组件，它能让开发者方便地在不同的页面间进行导航，并且自动管理页面堆栈。你可以通过 Router 进行页面跳转，同时还可以在跳转过程中传递参数或者进行其他自定义操作。

在开发应用时，合理的页面跳转策略不仅能让用户体验更加流畅，还能帮助开发者提高代码的可维护性和可扩展性。Router 提供了两个主要方法：push 和 replace，分别适用于不同的页面跳转场景。

Router 配置和基础知识

在鸿蒙中，Router 路由的配置通常发生在应用启动时，或者在某些主要页面中进行配置。配置路由表就是整个页面跳转流程的第一步。路由表负责将页面路径与实际的页面组件进行绑定。

配置路由表

我们首先需要做的是配置路由表，将不同的路由路径与对应的页面组件关联起来。这一过程在鸿蒙应用中非常简单，只需要指定每个路径对应的页面组件即可。

示例代码：配置路由表

import router from '@system.router';  // 引入 router 模块
import HomePage from './pages/HomePage';
import ProfilePage from './pages/ProfilePage';
import SettingsPage from './pages/SettingsPage';

// 配置路由表
const routes = [
  { path: '/home', component: HomePage },  // 首页
  { path: '/profile', component: ProfilePage },  // 个人信息页
  { path: '/settings', component: SettingsPage }  // 设置页
];

// 启动应用并绑定路由
export default {
  data: {
    routes: routes
  }
};

在上面的代码中，我们创建了一个包含三条路径的路由表：

/home 路径对应 HomePage 页面组件。
/profile 路径对应 ProfilePage 页面组件。
/settings 路径对应 SettingsPage 页面组件。

通过这些配置，应用就能够知道点击哪个链接后跳转到哪个页面。

路由跳转方法

鸿蒙的 Router 提供了 push 和 replace 两个常用的跳转方法，它们有着不同的功能和适用场景。

1. 使用 `Router.push()` 进行页面跳转

Router.push() 方法的作用是将目标页面压入页面堆栈并进行页面跳转。当页面跳转完成后，用户依然可以通过点击返回按钮返回到上一页。push 是一种典型的“前进”操作，适用于那些用户可能需要回退的场景。

示例代码：使用 `push` 跳转

// 使用 Router.push() 跳转到 ProfilePage
export default {
  methods: {
    navigateToProfile() {
      router.push({
        uri: '/profile',  // 跳转到 ProfilePage
        params: { userId: 123 }  // 可以传递参数给目标页面
      });
    }
  }
};

在上面的代码中，我们定义了 navigateToProfile 方法，在该方法中使用了 Router.push() 进行页面跳转。uri 表示目标页面的路径，params 用于传递给目标页面的参数。在目标页面中，我们可以通过 this.$route.params.userId 来获取这些参数。

2. 使用 `Router.replace()` 进行页面跳转

Router.replace() 方法会替换当前页面，而不会在页面堆栈中保留当前页面的记录。因此，当用户点击返回按钮时，不会返回到这个页面，而是会跳到替换之前的页面。replace 适用于那些不需要用户返回的场景，比如登录、退出等操作。

示例代码：使用 `replace` 跳转

// 使用 Router.replace() 跳转到 SettingsPage
export default {
  methods: {
    navigateToSettings() {
      router.replace({
        uri: '/settings'  // 跳转到 SettingsPage
      });
    }
  }
};