如何在HarmonyOS应用中实现页面导航？

Question

怎么在鸿蒙应用中实现页面导航

Answer 1

在HarmonyOS应用中实现页面导航，这种场景一般应用在2个页面直接的交互。

下面提供一份示例代码，帮助你快速掌握如何实现页面导航。

在 config.json 中定义页面路由:

{
  "pages": [
    {
      "path": "/home",
      "component": "HomePage"
    },
    {
      "path": "/detail",
      "component": "DetailPage"
    }
  ]
}

通过上面的代码可以看出，在 pages 文件夹中创建两个页面 HomePage 和 DetailPage。

在 HomePage 中添加导航代码:

<!-- HomePage.hml -->
<template>
  <div>
    <button @click="navigateToDetail">Go to Detail Page</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateToDetail() {
      this.$router.push({ path: '/detail' });
    }
  }
};
</script>

Answer 2

Navigation 和 Router 是两种在应用程序开发中用于处理页面导航和路由的不同方案。Navigation 通常指的是在应用程序中提供导航功能的组件或系统，专门为移动应用设计，提供了丰富的导航体验，如栈导航、标签导航等，同时与移动应用的 UI/UX 设计紧密集成，能够提供流畅的用户体验，但主要适用于移动应用，对于 Web 应用可能不是最佳选择，某些导航库可能具有较大的学习曲线或需要额外的配置。Router 适用于 Web 应用，能够很好地处理 URL 的变化和组件的渲染，允许开发者根据 URL 结构来组织应用代码，使得应用更加模块化和可维护，但在处理复杂的导航逻辑时，可能需要更多的代码和配置，对于移动应用来说，使用 Router 可能无法充分利用移动设备的。