写给初学者的 HarmonyOS 教程 -- 页面路由（router）

页面路由（router）是指在应用程序中实现不同页面之间的跳转和数据传递。

HarmonyOS 提供了 Router 模块，通过不同的 url 地址，可以方便地进行页面路由，轻松地访问不同的页面。

类似这样的效果：

在这里插入图片描述

页面跳转是开发过程中的一个重要组成部分。在使用应用程序时，通常需要在不同的页面之间跳转，有时还需要将数据从一个页面传递到另一个页面（类似 Activity 跳转）。

Router 模块：提供了两种 跳转模式，分别是 router.pushUrl() 和 router.replaceUrl()。

这两种模式决定了目标页是否会替换当前页。

跳转模式说明
router.pushUrl()目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用 router.back() 方法返回到当前页。
router.replaceUrl()目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

Router 模块：提供了两种 实例模式，分别是 Standard 和 Single。

这两种模式决定了目标 url 是否会对应多个实例。

实例模式说明
Standard标准实例模式，也是默认情况下的实例模式。
每次调用该方法都会新建一个目标页，并压入栈顶。
Single单实例模式。如果目标页的 url 在页面栈中已经存在同 url 页面，
则离栈顶最近的同 url 页面会被移动到栈顶，并重新加载；
如果目标页的 url 在页面栈中不存在同 url 页面，则按照标准模式跳转。

构建第一个界面

接下来我们实操一下，首先创建一个功能，默认的界面代码如下：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行效果：

在这里插入图片描述

在默认页面基础上，我们添加一个 Button 组件，作为按钮响应用户点击，从而实现跳转到另一个页面。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next').fontSize(30).fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({ top: 20 })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行效果：

在这里插入图片描述

构建第二个界面

接下来创建第二个我们需要跳转的界面。

新建第二个页面文件。在“Project”窗口，打开“entry > src > main > ets ”，右键点击“pages”文件夹，选择“New > ArkTS File”，命名为“Second”，点击“Finish”。

在这里插入图片描述

创建好 Second.ets 后，需要 手动配置 好第二个界面的路由信息。

在“Project”窗口，打开“entry > src > main > resources > base > profile”，在 main_pages.json 文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下：

在这里插入图片描述

如果你仔细的话，会发现上面我对手动配置加粗了，其实创建新的界面还有更简洁的方法。

我们可以在右键点击“pages”文件夹时，选择“New > Page”，这样的话就无需手动配置相关页面路由了，比如我们再创建一个新的界面：Third.ets。

在这里插入图片描述

你会发现 main_pages.json 会默认添加 Third 界面的路由：

{
  "src": [
    "pages/Index",
    "pages/Second",
    "pages/Third"
  ]
}

刚刚创建的 Second 页面没有任何代码，我们添加相关文本，并且我们也给它搞一个 Button。

预览效果：

在这里插入图片描述

实现界面跳转

在使用页面路由 Router 相关功能之前，我们需要在代码中先导入 Router 模块：

import router from '@ohos.router';

router.pushUrl()

import router from '@ohos.router'  // 导入页面路由模块

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next').fontSize(30).fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({ top: 20 })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 跳转按钮绑定 onClick 事件，点击时跳转到第二页
        .onClick(() => {
          // 跳转到第二页
          router.pushUrl({ url: 'pages/Second' })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

这样就可以实现页面的跳转了，看下效果：

在这里插入图片描述

router.back()

在第二个页面中，我们可以给返回按钮绑定 onClick 事件，点击按钮时返回到第一页。

import router from '@ohos.router'

@Entry
@Component
struct Second {
  @State message: string = 'Hi there'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        .onClick(() => {
          router.back()  // 返回到第一页
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行效果：

在这里插入图片描述

router.replaceUrl

router.replaceUrl 主要用于目标页替换当前页，并销毁当前页。比如有一个常用场景：一个登录页（Login）和一个个人中心页，希望从登录页成功登录后，跳转到个人中心页。同时销毁登录页，再返回时直接退出应用。

import router from '@ohos.router'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next').fontSize(30).fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({ top: 20 })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        .onClick(() => {
          // router.replaceUrl({ url: 'pages/Second' })
          // replaceUrl 实现跳转后会销毁前一个页面
          router.replaceUrl({ url: 'pages/Second' })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行效果：

在这里插入图片描述

传递数据

如果需要在跳转时传递一些数据给目标页，则可以在调用 Router 模块的方法时，添加一个 params 属性，并指定一个对象作为参数。例如：

第一个页面

import router from '@ohos.router'

class DataModel {
  info: String;
}

let paramsInfo: DataModel = {
  info: '第一页传过来的数据'
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next').fontSize(30).fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({ top: 20 })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Second',
            params: paramsInfo
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

第二个页面

import router from '@ohos.router'

const params = router.getParams(); // 获取传递过来的参数对象

@Entry
@Component
struct Second {
  @State message: string = 'Hi there'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(params['info'])
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        .onClick(() => {
          router.back()
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行效果：

在这里插入图片描述

页面返回

返回上一个页面

上面我们其实已经看到了一个很简单的关于页面返回的例子，调用 router.back() 即可。

router.back();

返回到指定页面

另外，我们还可以添加 url 参数指定返回的界面。

router.back({
  url: 'pages/Home'
});

比如现在工程里面还有一个 Third 的页面。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        ... ...
        Button() {
          Text('Next').fontSize(30).fontWeight(FontWeight.Bold)
        }
        ... ...
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Second',  // 跳转到第二个页面
            params: paramsInfo
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Entry
@Component
struct Second {
  @State message: string = 'Hi there'

  build() {
    Row() {
      Column() {
        ... ...
        Button() {
          Text('Next')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        ... ...
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Third'  // 跳转到第三个页面
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Entry
@Component
struct Third {
  @State message: string = 'Third Page'

  build() {
    Row() {
      Column() {
        ... ...
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        ... ...
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Index'. // 指定 Third 返回到首页 Index
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

在这里插入图片描述

带参数信息返回

同样的，返回到指定页面也可以传递自定义参数信息。

router.back({
  url: 'pages/Home',
  params: {
    info: '来自Home页'
  }
});

在目标页中，在需要获取参数的位置调用 router.getParams() 方法即可。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/219277.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

代理服务器如何保护用户隐私和安全？

代理服务器如何保护用户隐私和安全？

目录 前言 一、代理服务器的工作原理 二、代理服务器的隐私保护机制 1. IP地址隐藏 2. 安全加密 3. 访问控制 三、代理服务器的安全问题 1. 黑客攻击 2. 版本漏洞 3. 恶意软件 四、总结 前言 代理服务器是一种位于用户与服务器之间的中介，可以隐藏用户的…
阅读更多...
VSCode 配置JavaScript环境

VSCode 配置JavaScript环境

首先下载node.js，我的电脑是Windows10版本 之后安装node 在这里插入图片描述 安装成功 如果发现运行的时候还是报错，则添加环境变量试试 在Windows10版本的搜索框，搜索环境变量，点击 D:\Program Files\nodejs\ %NODE_HOME…
阅读更多...
并行流（Parallel Streams）

并行流（Parallel Streams）

并行流（Parallel Streams）是Java 8引入的一种并行处理集合数据的机制，它允许将操作并行化以提高处理速度。然而，并行流可能存在一些安全问题，特别是在多线程环境下。 以下是一些与并行流相关的安全问题： 共…
阅读更多...
实现简单的Http服务器+SpringMvc，集成到Spring

实现简单的Http服务器+SpringMvc，集成到Spring

实现简单的Http服务器SpringMvc，集成到Spring 1、Http协议 1.1、HTTP 协议请求格式 方法 空格 URL 空格 版本 回车符 换行符头部域名称：头部域值 回车符 换行符...头部域名称：头部域值 回车符 …
阅读更多...
【部署】Deploying Trino on linux

【部署】Deploying Trino on linux

文章目录 一. Requirements1. Linux operating system2. Java 环境3. Python 二. Installing Trino三. Configuring Trino1. 节点配置2. JVM 配置3. Config properties4. Log levels5. Catalog properties 四. Running Trino 一. Requirements 1. Linux operating system 64位…
阅读更多...
鸿蒙Harmony开发初探

鸿蒙Harmony开发初探

一、背景 9月25日华为秋季全场景新品发布会，余承东宣布鸿蒙HarmonyOS NEXT蓄势待发，不再支持安卓应用。网易有道、同程旅行、美团、国航、阿里等公司先后宣布启动鸿蒙原生应用开发工作。 二、鸿蒙Next介绍 HarmonyOS是一款面向万物互联，全…
阅读更多...
查询绑定了所有id的name

查询绑定了所有id的name

1、如图，绑定了所有id的有A,B两个name 2、第一种Sql及效率 explain SELECT name,count(id) as count from test GROUP BY name HAVING count(id)(SELECT count(DISTINCT id) from test); 3、第二种sql及效率 explain select * from (SELECT name,count(id) as co…
阅读更多...
软著项目推荐 深度学习的智能中文对话问答机器人

软著项目推荐 深度学习的智能中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分：4.2 损失函数：4.3 搭建seq2seq框架：4.4 测试部分：4.5 评价NLP测试效果：4.6 梯度截断…
阅读更多...
柔性线路板市场分析：预计2028年将达到221亿美元

柔性线路板市场分析：预计2028年将达到221亿美元

柔性电路板又称“软板”，是用柔性的绝缘基材制成的印刷电路。柔性电路提供优良的电性能，能满足更小型和更高密度安装的设计需要，也有助于减少组装工序和增强可靠性。柔性电路板是满足电子产品小型化和移动要求的惟一解决方法。可以自由弯曲、…
阅读更多...
360公司-2019校招笔试-Windows开发工程师客观题合集解析

360公司-2019校招笔试-Windows开发工程师客观题合集解析

360公司-2019校招笔试-Windows开发工程师客观题合集 API无法实现进程间数据的相互传递是PostMessage2.以下代码执行后，it的数据为（异常） std::list<int> temp; std::list<int>::iterator it = temp.begin(); it = --it; 3.API在失败时的返回值跟其他不一样是 …
阅读更多...
会话 cookie 及隐私的那些事

会话 cookie 及隐私的那些事

什么是会话 Cookie？ 会话 Cookie 的概念非常简单。 会话 Cookie，也称为临时 Cookie 或内存 Cookie，是网站在浏览会话期间存储在用户计算机或设备上的小数据片段。 它是由网站生成并由您的浏览器存储和使用的多种 Cookie 之一。 常规 Cookie 或“持久”Cookie 是通常在您的…
阅读更多...
Ant Design Vue 年选择器

Ant Design Vue 年选择器

文章目录 参考文档效果展示实现过程 参考文档 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; DatePicker 日期选择框 大佬&#xff1a;搬砖小匠&#xff08;Ant Design vue 只选择年&#xff09; 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案…
阅读更多...
Django宠物之家平台

Django宠物之家平台

摘 要 随着互联网的快速发展&#xff0c;利用网络的管理系统也逐渐发展起来。在线管理模式快速融入了众多用户的眼球&#xff0c;从而产生了各种各样的平台管理系统。 关于本django宠物的家庭平台管理系统的设计来说&#xff0c;系统开发主要采纳Python技术、B/S框架&#xff…
阅读更多...
几何对象的凸点集

几何对象的凸点集

// 引入VTK并初始化 #include "vtkAutoInit.h" VTK_MODULE_INIT(vtkRenderingOpenGL2); VTK_MODULE_INIT(vtkInteractionStyle);#include <vtkActor.h> #include <vtkCamera.h> #include <vtkConvexPointSet.h> #include <vtkDataSetMapper.h&g…
阅读更多...
工程化使用React

工程化使用React

安装 首先全局安装 npm install create-react-app -g创建项目 create-react-app proName最基本的一个react工程化创建完成 项目目录
阅读更多...
zabbix的自动发现机制:

zabbix的自动发现机制:

zabbix的自动发现机制: zabbix客户端主动的和服务端联系&#xff0c;将自己的地址和端口发送给服务端&#xff0c;实现自动添加监控主机 客户端是主动的一方 缺点&#xff1b;如果自定义网段中主机数量太多&#xff0c;等级耗时会很久&#xff0c;而且这个自动发现机制不是很…
阅读更多...
从图片或PDF文件识别表格提取内容的简单库img2table

从图片或PDF文件识别表格提取内容的简单库img2table

img2table是一个基于OpenCV 图像处理的用于 PDF 和图像的表识别和提取 Python库。由于其设计基于神经网络的解决方案&#xff0c;提供了一种实用且更轻便的替代方案&#xff0c;尤其是在 CPU 上使用时。 该库的特点&#xff1a; 识别图像和PDF文件中的表格&#xff0c;包括在表…
阅读更多...
RabbitMQ 详解

RabbitMQ 详解

文章目录 MQ 简介1、简介2、MQ优缺点3、MQ应用场景4、AMQP 和 JMS5、常见的 MQ 产品 RabbitMQ 工作原理Linux 环境安装 RabbitMQ1、rmp安装法1.1 安装1.2 开启管理界面1.3 启动与停止1.4 创建新用户 2、docker安装法2.1 安装2.2 下载rabbitmq_delayed_message_exchange插件 Rab…
阅读更多...
学习pytorch17 pytorch模型保存及加载

学习pytorch17 pytorch模型保存及加载

pytorch模型保存及加载 代码 import torch import torchvisionvgg16 torchvision.models.vgg16(pretrainedFalse)# 1. save model 1 保存模型结构及模型参数 torch.save(vgg16, ./vgg16_save1.model)# 2. save model 2 只保存模型参数 比第一种保存方法保存的文件要小 t…
阅读更多...
微信小程序云开发报错

微信小程序云开发报错

微信小程序云开发报错 起因是云开发报了个错误&#xff1a; fail: Error: cloud.callFunction:fail Error: errCode: -501000 | errMsg: [100003] env not exists (f8c78dea-9f77-43cf-9e7f-88c85f2a0795) (callId: 1701747734223-0.895078767368265) (trace: 11:42:14 star…
阅读更多...
最新文章

Copyright @ 2022~2023