鸿蒙中，如何实现页面跳转与参数传递？

最新推荐文章于 2025-10-24 17:58:32 发布

原创最新推荐文章于 2025-10-24 17:58:32 发布 · 862 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为

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

447 篇文章

订阅专栏

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

全文目录：

在 鸿蒙操作系统（HarmonyOS）中，页面跳转与参数传递是实现应用页面间导航和数据传递的重要功能。通过 ArkUI 和 ArkTS，鸿蒙提供了简便的方式来实现页面跳转及在不同页面间传递参数。

鸿蒙的页面跳转和参数传递通常使用 路由（Route） 功能来实现。可以通过 router.push() 或 router.replace() 来跳转页面，通过 路由参数 或 共享数据 来传递参数。

1. 页面跳转的基础概念

在鸿蒙中，页面跳转和参数传递的核心通过 路由机制 来实现，类似于传统的前端框架（如 Vue.js）中的路由。鸿蒙的路由管理使用 @ohos.lets.route 路由包来处理页面跳转和参数传递。

2. 页面跳转与参数传递

2.1 页面跳转

在鸿蒙中，页面跳转通常是通过 router.push() 来完成的。push 方法将页面推送到栈中，用户可以使用后退按钮返回到之前的页面。

示例：
假设我们有两个页面：Page1 和 Page2，我们希望从 Page1 跳转到 Page2。

Page1.vue：

import { VButton } from '@ohos.ui.components';

export default {
  methods: {
    goToPage2() {
      this.$router.push({
        uri: 'pages/Page2', // 目标页面路径
        params: {
          message: 'Hello from Page1!',
        },
      });
    },
  },
  build() {
    return (
      <div>
        <VButton onClick={this.goToPage2}>Go to Page 2</VButton>
      </div>
    );
  },
};

在 Page1 中，点击按钮会调用 goToPage2 方法，这个方法会通过 this.$router.push() 实现页面跳转并传递 message 参数。

2.2 获取参数

在跳转的目标页面（Page2）中，可以通过 this.$route.params 获取传递的参数。

Page2.vue：

import { VText } from '@ohos.ui.components';

export default {
  data() {
    return {
      message: '',
    };
  },
  created() {
    // 获取从 Page1 跳转时传递的参数
    this.message = this.$route.params.message || 'No message received';
  },
  build() {
    return (
      <div>
        <VText>{this.message}</VText>
      </div>
    );
  },
};

在 Page2 中，this.$route.params.message 获取的是从 Page1 跳转时传递过来的 message 参数。

3. 其他常用路由方法

除了 router.push()，鸿蒙还提供了其他几种方法来进行页面跳转：

router.replace()：替代当前页面，不保留当前页面在历史记录中，用户无法通过后退按钮返回。
router.back()：返回到上一个页面，通常用于实现后退功能。
router.go()：向前或向后跳转指定数量的页面。

示例：

router.replace()：

this.$router.replace({
  uri: 'pages/Page2',
  params: {
    message: 'Replaced by router.replace()',
  },
});

示例：

router.back()：

this.$router.back();

4. 通过 URI 参数传递数据

鸿蒙的路由系统不仅支持通过 params 传递数据，还可以通过 URI 参数进行传递。URI 参数通常用于传递少量的、公开的参数（例如，ID 或状态标识符）。

示例：

Page1.vue：

import { VButton } from '@ohos.ui.components';

export default {
  methods: {
    goToPage2() {
      this.$router.push({
        uri: 'pages/Page2?message=Hello%20from%20URI',
      });
    },
  },
  build() {
    return (
      <div>
        <VButton onClick={this.goToPage2}>Go to Page 2 with URI</VButton>
      </div>
    );
  },
};

在这个例子中，我们通过 uri 参数将数据（message）传递给目标页面。

Page2.vue：

import { VText } from '@ohos.ui.components';

export default {
  data() {
    return {
      message: '',
    };
  },
  created() {
    // 通过 URI 获取参数
    const urlParams = new URLSearchParams(this.$route.uri);
    this.message = urlParams.get('message') || 'No message received';
  },
  build() {
    return (
      <div>
        <VText>{this.message}</VText>
      </div>
    );
  },
};