005 页面路由

news/2024/7/21 9:27:52 标签: harmonyos, 华为

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。

页面跳转

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

两种跳转模式

Router模块提供了两种跳转模式，分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页是否会替换当前页。

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

两种实例模式

同时，Router模块提供了两种实例模式，分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。

  • Standard：标准实例模式，也是默认情况下的实例模式。每次调用该方法都会新建一个目标页，并压入栈顶。

  • Single：单实例模式。即如果目标页的url在页面栈中已经存在同url页面，则离栈顶最近的同url页面会被移动到栈顶，并重新加载；如果目标页的url在页面栈中不存在同url页面，则按照标准模式跳转。

带参传递

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

前期准备

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

import router from '@ohos.router';

页面返回

当用户在一个页面完成操作后，通常需要返回到上一个页面或者指定页面，这就需要用到页面返回功能。在返回的过程中，可能需要将数据传递给目标页，这就需要用到数据传递功能。

返回到上一个页面

router.back();

返回到指定页面

router.back({

  url: 'pages/Home'

});

这种方式可以返回到指定页面，需要指定目标页的路径。目标页必须存在于页面栈中才能够返回。

返回到指定页面，并传递自定义参数信息

router.back({

  url: 'pages/Home',

  params: {

    info: '来自Home页'

  }

});

这种方式不仅可以返回到指定页面，还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页中通过调用router.getParams()方法进行获取和解析。

在目标页中，在需要获取参数的位置调用router.getParams()方法即可，例如在onPageShow()生命周期回调中：

onPageShow() {

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

  const info = params['info']; // 获取info属性的值

}

示例

import router from '@ohos.router';

import { DataModel } from '../model/DataModelInfo'

let paramsInfo: DataModel = {

  id: 123,

  info: {

    index: 'Index页面'

  }

};

@Entry

@Component

struct Index {

  @State message: string = 'Hello World'

  build() {

    Row() {

      Column() {

        Button("跳转到IndexTestA界面").onClick(_ => {

          router.pushUrl({

            url: 'pages/IndexTestA' // 目标url

          }, router.RouterMode.Standard, (err) => {

            if (err) {

              console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);

              return;

            }

            console.info('Invoke pushUrl succeeded.');

          });

        }).margin({ bottom: 10 })

        Button("跳转到IndexTestA界面并传递数据").onClick(_ => {

          router.pushUrl({

            url: 'pages/IndexTestA', // 目标url

            params: paramsInfo

          }, router.RouterMode.Standard, (err) => {

            if (err) {

              console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);

              return;

            }

            console.info('Invoke pushUrl succeeded.');

          });

        }).margin({ bottom: 10 })

        Button("跳转到IndexTestA并替换当前界面").onClick(_ => {

          router.replaceUrl({

            url: 'pages/IndexTestA' // 目标url

          }, router.RouterMode.Standard, (err) => {

            if (err) {

              console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);

              return;

            }

            console.info('Invoke pushUrl succeeded.');

          });

        }).margin({ bottom: 10 })

        Button("跳转到IndexTestB界面").onClick(_ => {

          router.pushUrl({

            url: 'pages/IndexTestB' // 目标url

          }, router.RouterMode.Standard, (err) => {

            if (err) {

              console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);

              return;

            }

            console.info('Invoke pushUrl succeeded.');

          });

        }).margin({ bottom: 10 })

        Button("跳转到IndexTestB并替换当前界面").onClick(_ => {

          router.replaceUrl({

            url: 'pages/IndexTestB' // 目标url

          }, router.RouterMode.Standard, (err) => {

            if (err) {

              console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);

              return;

            }

            console.info('Invoke pushUrl succeeded.');

          });

        })

      }

      .width('100%')

    }

    .height('100%')

  }

}

import router from '@ohos.router';

@Entry

@Component

struct IndexTestA {

  @State message: string = 'Hello World'

  @State sourceData: string = ''

  build() {

    Row() {

      Column() {

        if (this.sourceData != '') {

          Text(`来自${this.sourceData}的数据`)

        }

        Text("IndexTestA").fontSize(20).margin({ bottom: 10 })

        Button("返回按钮").onClick(_ => {

          router.back()

        }).margin({ bottom: 10 })

        Button("跳转到Index").onClick(_ => {

          router.pushUrl({ url: 'pages/Index' })

        }).margin({ bottom: 10 })

        Button("Single方式跳转到Index").onClick(_ => {

          router.pushUrl({ url: 'pages/Index' }, router.RouterMode.Single)

        }).margin({ bottom: 10 })

      }.padding(20)

      .width('100%')

    }

    .height('100%')

  }

  onPageShow() {

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

    if (params==null) {

      return

    }

    if (params['info']!=null) {

      console.log('info',"params"+params['id'])

      console.log('info',"params['info'].index"+params['info'].index)

      this.sourceData = params['info'].index; // 获取info属性的值

    }

  }

}

import router from '@ohos.router';

import { DataModel } from '../model/DataModelInfo'

let paramsInfo: DataModel = {

  id: 123,

  info: {

    index: 'IndexTestB页面'

  }

};

@Entry

@Component

struct IndexTestB {

  @State message: string = 'Hello World'

  build() {

    Row() {

      Column() {

        Text("IndexTestB").fontSize(20).margin({ bottom: 10 })

        Button("返回按钮").onClick(_ => {

          router.back()

        }).margin({ bottom: 10 })

        Button("返回到指定IndexTestA按钮").onClick(_ => {

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

        }).margin({ bottom: 10 })

        Button("返回到指定IndexTestA并携带参数").onClick(_ => {

          router.back({ url: 'pages/IndexTestA', params: paramsInfo });

        }).margin({ bottom: 10 })

        Button("跳转到Index").onClick(_ => {

          router.pushUrl({ url: 'pages/Index' })

        }).margin({ bottom: 10 })

        Button("Single方式跳转到Index").onClick(_ => {

          router.pushUrl({ url: 'pages/Index' }, router.RouterMode.Single)

        }).margin({ bottom: 10 })

      }.padding(20)

      .width('100%')

    }

    .height('100%')

  }

}

如上是三个界面，然后是三个界面之间的跳转返回，如下是跳转的演示：


http://www.niftyadmin.cn/n/286854.html

相关文章

PostgreSQL实战之增量备份

PostgreSQL实战之增量备份

目录 PostgreSQL实战之增量备份 1 开启WAL 归档 2 创建基础备份 2.1 使用低级API创建基础备份 PostgreSQL实战之增量备份 PostgreSQL在做写入操作时，对数据文件做的任何修改信息，首先会写入WAL日志（预写日志)，然后才会对数据文…
阅读更多...
NLP模型（四）——seq2seq模型与Attention机制介绍

NLP模型（四）——seq2seq模型与Attention机制介绍

文章目录 1. seq2seq模型介绍2. 模型计算2.1 LSTM结构单元2.2 seq2seq计算流程 3. Attention机制3.1 引入Attention3.2 计算全局对齐权重 4. seq2seq加入Attention机制5. 模型理解6. 模型细节6.1 解码器结构6.2 加入信息方式 参考文章 1. seq2seq模型介绍 传统的RNN只能处理 1…
阅读更多...
【Redis】持久化机制详解：从RDB到AOF，你需要知道的一切

【Redis】持久化机制详解：从RDB到AOF，你需要知道的一切

本文目录 RDB（默认） 自动触发 🆚 手动触发 优点 缺点 何时会触发RDB快照 AOF 启用 AOF 配置路径 AOF 文件📃 AOF 的写回策略 AOF 的重写机制 优点 缺点 RDB & AOF 优先级 终极方案：RDB AOF 混合方…
阅读更多...
指针函数和函数指针

指针函数和函数指针

本文目录 • 前言 • 一、返回指针的函数 二、指向函数的指针回到顶部 一、返回指针的函数 指针也是C语言中的一种数据类型，因此一个函数的返回值肯定可以是指针类型的。 返回指针的函数的一般形式为：类型名 * 函数名(参数列表) 比如下面这个函数&#…
阅读更多...
MySQL：常见运算符

MySQL：常见运算符

前言： 五一过后，我又来啦！狂玩五天，放松好心情~ MySQL中的运算符有以下4类，分别是：算数运算符，比较运算符，逻辑运算符，位操作运算符。 算数运算符： 有一定…
阅读更多...
推荐算法实战项目：DeepCross 原理以及案例实战(附完整 Python 代码)

推荐算法实战项目：DeepCross 原理以及案例实战(附完整 Python 代码)

本文要介绍的是由斯坦福大学联合Google的研究人员发表的论文《Deep & Cross Network for Ad Click Predictions》中提出的Deep&Cross模型，简称DCN。 DCN模型是Wide&Deep的改进版本，其中Deep部分的设计思路与Wide&Deep没有发生本质的变化…
阅读更多...
Cadence Allegro（0）：Cadence文件命名规则

Cadence Allegro（0）：Cadence文件命名规则

Cadence Allegro（0）：Cadence文件命名规则 前提摘要： 个人说明： 限于时间紧迫以及作者水平有限，本文错误、疏漏之处恐不在少数，恳请读者批评指正。意见请留言或者发送邮件至：panzzz3…
阅读更多...
搭建electron-vue下

搭建electron-vue下

搭建electron-vue下 npm install 后续问题Version 9 of Highlight.js has reached EOL. npm run dev 后续ReferenceError: Unknown plugin "component" specified in ...Error: Cannot find module electron-logCant resolve axios inCant resolve vue-electronCant …
阅读更多...
最新文章

Copyright @ 2022~2023