1. Toy模板网首页
  2. > Toy博客

鸿蒙Harmony-页面路由（router）详解

9月前 作者：袁震 分类：Toy博客 阅读(43) 违法举报

这篇具有很好参考价值的文章主要介绍了鸿蒙Harmony-页面路由（router）详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

慢慢理解世界，慢慢更新自己，希望你的每一个昨天，今天，和明天都会很快乐，你知道的，先好起来的从来都不是生活，而是你自己 

目录

一，定义

二，页面跳转

2.1使用router.pushUrl

2.2 使用router.replaceUrl

2.3 使用Single模式

2.4 带参数的跳转

 三，页面返回

 3.1返回到上一个页面

3.2 返回到指定页面

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

 四，页面返回前增加一个询问框

4.1系统默认询问框

4.2 自定义询问框

一，定义

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

Router适用于模块间与模块内页面切换，通过每个页面的url实现模块间解耦。模块内页面跳转时，为了实现更好的转场动效场景不建议使用该模块，推荐使用Navigation。

二，页面跳转

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

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

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

router.replaceUrl()：目标页面会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

 ！注意：页面栈的最大容量为32个页面。如果超过这个限制，可以调用router.clear()方法清空历史页面栈，释放内存空间。

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

Standard：多实例模式，也是默认情况下的跳转模式。目标页面会被添加到页面栈顶，无论栈中是否存在相同url的页面。

Single：单实例模式。如果目标页面的url已经存在于页面栈中，则会将离栈顶最近的同url页面移动到栈顶，该页面成为新建页。如果目标页面的url在页面栈中不存在同url页面，则按照默认的多实例模式进行跳转。

2.1使用router.pushUrl

1，添加页面路径

{
  "src": [
    "pages/Index",
    "pages/FirstPage",
    "pages/SecondPage"
  ]
}

2，编写第一个页面

import router from '@ohos.router'

@Entry
@Component
struct FirstPage {

  aboutToAppear(){
    console.error("yz---aboutToAppear")
  }

  onPageShow(){
    console.error("yz---onPageShow")
  }

  onBackPress(){
    console.error("yz---onBackPress")
  }

  aboutToDisappear(){
    console.error("yz---aboutToDisappear")
  }

  onPageHide(){
    console.error("yz---onPageHide")
  }

  onDestroy(){
    console.error("yz---onDestroy")
  }

  build() {
    Column() {
      Text("第一页")
      Text("跳转下一页").width("50%").height("30%")
        .onClick(()=>{
          router.pushUrl({ url: "pages/SecondPage"})
        })
    }.width("100%").height("100%")
  }
}

3，编写第二个页面

import router from '@ohos.router'

@Entry
@Component
struct SecondPage {

 
  build() {
    Column() {
      Text("第二页")
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          router.pushUrl({ url: "pages/FirstPage"})
        })
    }.width("100%").height("100%")
  }
}

运行：

鸿蒙Harmony-页面路由（router）详解,鸿蒙开发,harmonyos,java,华为,harmony,鸿蒙,android点击下一页鸿蒙Harmony-页面路由（router）详解,鸿蒙开发,harmonyos,java,华为,harmony,鸿蒙,android

日志：

鸿蒙Harmony-页面路由（router）详解,鸿蒙开发,harmonyos,java,华为,harmony,鸿蒙,android

2.2 使用router.replaceUrl

import router from '@ohos.router'

@Entry
@Component
struct FirstPage {

  aboutToAppear(){
    console.error("yz---aboutToAppear")
  }

  onPageShow(){
    console.error("yz---onPageShow")
  }

  onBackPress(){
    console.error("yz---onBackPress")
  }

  aboutToDisappear(){
    console.error("yz---aboutToDisappear")
  }

  onPageHide(){
    console.error("yz---onPageHide")
  }

  onDestroy(){
    console.error("yz---onDestroy")
  }

  build() {
    Column() {
      Text("第一页")
      Text("跳转下一页").width("50%").height("30%")
        .onClick(()=>{
          router.replaceUrl({ url: "pages/SecondPage"})
        })
    }.width("100%").height("100%")
  }
}

日志输出：

鸿蒙Harmony-页面路由（router）详解,鸿蒙开发,harmonyos,java,华为,harmony,鸿蒙,android

2.3 使用Single模式

import router from '@ohos.router'

@Entry
@Component
struct FirstPage {

  aboutToAppear(){
    console.error("yz---aboutToAppear")
  }

  onPageShow(){
    console.error("yz---onPageShow")
  }

  onBackPress(){
    console.error("yz---onBackPress")
  }

  aboutToDisappear(){
    console.error("yz---aboutToDisappear")
  }

  onPageHide(){
    console.error("yz---onPageHide")
  }

  onDestroy(){
    console.error("yz---onDestroy")
  }

  build() {
    Column() {
      Text("第一页")
      Text("跳转下一页").width("50%").height("30%")
        .onClick(()=>{
          router.pushUrl({ url: "pages/SecondPage"},router.RouterMode.Single)
        })
    }.width("100%").height("100%")
  }
}

运行输出：

鸿蒙Harmony-页面路由（router）详解,鸿蒙开发,harmonyos,java,华为,harmony,鸿蒙,android

2.4 带参数的跳转

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

1，定义一个data类：

import YuanZhen from './YuanZhen';

export default class Data {
  id: number = 0;
  info: YuanZhen|null = null;

  constructor(id: number, info: YuanZhen) {
    this.id = id;
    this.info = info;
  }
}

2，在第一页传递参数，跳转下一页

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct FirstPage {

  @State yuanZhen:YuanZhen =new YuanZhen("袁震",18)

  aboutToAppear(){
    console.error("yz---aboutToAppear")
  }

  onPageShow(){
    console.error("yz---onPageShow")
  }

  onBackPress(){
    console.error("yz---onBackPress")
  }

  aboutToDisappear(){
    console.error("yz---aboutToDisappear")
  }

  onPageHide(){
    console.error("yz---onPageHide")
  }

  onDestroy(){
    console.error("yz---onDestroy")
  }

  build() {
    Column() {
      Text("第一页")
      Text("跳转下一页").width("50%").height("30%")
        .onClick(()=>{
          router.pushUrl({ url: "pages/SecondPage", params: new Data(222,this.yuanZhen)},router.RouterMode.Single)
        })
    }.width("100%").height("100%")
  }
}

3，在第二页接收第一页的参数并展示

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct SecondPage {
  yuanZhen : YuanZhen =new YuanZhen("袁震2",10)
  aboutToAppear(){
    let params:Data  =router.getParams() as Data
    this.yuanZhen =params.info as YuanZhen
  }

  build() {
    Column() {
      Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          router.replaceUrl({ url: "pages/FirstPage"})
        })
    }.width("100%").height("100%")
  }
}

跳转到第二页后展示第一页传过来的数据 

鸿蒙Harmony-页面路由（router）详解,鸿蒙开发,harmonyos,java,华为,harmony,鸿蒙,android

 三，页面返回

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

 3.1返回到上一个页面

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct SecondPage {
  yuanZhen : YuanZhen =new YuanZhen("袁震2",10)
  aboutToAppear(){
    let params:Data  =router.getParams() as Data
    this.yuanZhen =params.info as YuanZhen
  }

  build() {
    Column() {
      Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          router.back()
        })
    }.width("100%").height("100%")
  }
}

3.2 返回到指定页面

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct SecondPage {
  yuanZhen : YuanZhen =new YuanZhen("袁震2",10)
  aboutToAppear(){
    let params:Data  =router.getParams() as Data
    this.yuanZhen =params.info as YuanZhen
  }

  build() {
    Column() {
      Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          router.back({url:'pages/FirstPage'})
        })
    }.width("100%").height("100%")
  }
}

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

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct SecondPage {
  yuanZhen : YuanZhen =new YuanZhen("袁震2",10)
  aboutToAppear(){
    let params:Data  =router.getParams() as Data
    this.yuanZhen =params.info as YuanZhen
  }

  build() {
    Column() {
      Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          router.back({
            url:'pages/FirstPage',
            params: {
            info: '来自第二页'
          }})
        })
    }.width("100%").height("100%")
  }
}

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

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

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct FirstPage {

  @State yuanZhen:YuanZhen =new YuanZhen("袁震",18)

  aboutToAppear(){
    console.error("yz---aboutToAppear")
  }

  onPageShow(){
    console.error("yz---onPageShow:"+JSON.stringify(router.getParams()))
  }

  onBackPress(){
    console.error("yz---onBackPress")
  }

  aboutToDisappear(){
    console.error("yz---aboutToDisappear")
  }

  onPageHide(){
    console.error("yz---onPageHide")
  }

  onDestroy(){
    console.error("yz---onDestroy")
  }

  build() {
    Column() {
      Text("第一页")
      Text("跳转下一页").width("50%").height("30%")
        .onClick(()=>{
          router.pushUrl({ url: "pages/SecondPage", params: new Data(222,this.yuanZhen)},router.RouterMode.Single)
        })
    }.width("100%").height("100%")
  }
}

输出：

鸿蒙Harmony-页面路由（router）详解,鸿蒙开发,harmonyos,java,华为,harmony,鸿蒙,android

 注意：

当使用router.back()方法返回到指定页面时，原栈顶页面（包括）到指定页面（不包括）之间的所有页面栈都将从栈中弹出并销毁。

另外，如果使用router.back()方法返回到原来的页面，原页面不会被重复创建，因此使用@State声明的变量不会重复声明，也不会触发页面的aboutToAppear()生命周期回调。如果需要在原页面中使用返回页面传递的自定义参数，可以在需要的位置进行参数解析。例如，在onPageShow()生命周期回调中进行参数解析。

 四，页面返回前增加一个询问框

在开发应用时，为了避免用户误操作或者丢失数据，有时候需要在用户从一个页面返回到另一个页面之前，弹出一个询问框，让用户确认是否要执行这个操作。

4.1系统默认询问框

为了实现这个功能，可以使用页面路由Router模块提供的两个方法：router.showAlertBeforeBackPage()和router.back()来实现这个功能。

如果想要在目标界面开启页面返回询问框，需要在调用router.back()方法之前，通过调用​​​​​​​router.showAlertBeforeBackPage()方法设置返回询问框的信息

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'

@Entry
@Component
struct SecondPage {
  yuanZhen : YuanZhen =new YuanZhen("袁震2",10)
  aboutToAppear(){
    let params:Data  =router.getParams() as Data
    this.yuanZhen =params.info as YuanZhen
  }

  build() {
    Column() {
      Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          router.showAlertBeforeBackPage({message:"确认退出吗？"})
          router.back({
            url:'pages/FirstPage',
            params: {
            info: '来自第二页'
          }})
        })
    }.width("100%").height("100%")
  }
}

 鸿蒙Harmony-页面路由（router）详解,鸿蒙开发,harmonyos,java,华为,harmony,鸿蒙,android

4.2 自定义询问框

自定义询问框的方式，可以使用弹窗或者自定义弹窗实现。这样可以让应用界面与系统默认询问框有所区别，提高应用的用户体验度。

import router from '@ohos.router'
import Data from './bean/Data'
import YuanZhen from './bean/YuanZhen'
import promptAction from '@ohos.promptAction'

@Entry
@Component
struct SecondPage {
  yuanZhen : YuanZhen =new YuanZhen("袁震2",10)
  aboutToAppear(){
    let params:Data  =router.getParams() as Data
    this.yuanZhen =params.info as YuanZhen
  }

  build() {
    Column() {
      Text("第二页:name:"+this.yuanZhen.name+",age:"+this.yuanZhen.age)
      Text("返回上一页").width("50%").height("30%")
        .onClick(()=>{
          promptAction.showDialog({message:"您确认退出吗",buttons:[{text:"不确认",color:"#232"},{text:"确认",color:"#262"}]})
            .then((result:promptAction.ShowDialogSuccessResponse)=>{
              if(result.index==0){
                // 用户点击了“取消”按钮
              }else if(result.index==1){
                router.back()
              }
            })
            .catch((error:Error)=>{
              console.error("yz----返回错误")
            })


        })
    }.width("100%").height("100%")
  }
}

鸿蒙Harmony-页面路由（router）详解,鸿蒙开发,harmonyos,java,华为,harmony,鸿蒙,android文章来源地址https://www.toymoban.com/news/detail-808588.html

到了这里，关于鸿蒙Harmony-页面路由（router）详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 鸿蒙(HarmonyOS)应用开发——构建页面(题目答案)

    1.在Column容器中的子组件默认是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向，在Row容器中的组件默认是按照从左到右的水平方向布局的，其主轴的方向是水平方向。 正确(True) 2.List容器可以沿水平方向排列，也可以沿垂直方向排列。 正确(True) 3.当Tabs组件的参数

    2024年01月20日
    浏览(84)

  • 鸿蒙(HarmonyOS)应用开发——构建更加丰富的页面(题目答案)

    1.@State修饰的属性不允许在本地进行初始化。 错误(False) 解析： 2.@CustomDialog装饰器用于装饰自定义弹窗组件，使得弹窗可以自定义内容及样式。 正确(True) 3.将Video组件的controls属性设置为false时，不会显示控制视频播放的控制栏。 正确(True) 4.@Prop修饰的属性值发生变化时，此状

    2024年02月03日
    浏览(60)
  • 【鸿蒙4.0】详解harmonyos开发语言ArkTS

    【鸿蒙4.0】详解harmonyos开发语言ArkTS

    如官方文档所描述，ArkTS是基于Javascript以及Typescript的生态上做了进一步的扩展，进一步的提高开发效率，使用过低代码开发的老师应该会有一种感觉ArkTS像低代码一样更简洁，几行代码就能实现一个功能。以开发者的角度肯定是越简洁越好。下面来浅浅的了解一下js，ts以及

    2024年01月22日
    浏览(69)

  • HarmonyOS鸿蒙开发指南:UI开发 基于ArkTS的声明式开发范式 声明式UI开发实例 页面布局与连接

    目录 构建食物数据模型 构建食物列表List布局 构建食物分类Grid布局  页面跳转与数据传递

    2024年02月03日
    浏览(54)
  • HarmonyOS鸿蒙应用开发( 四、重磅组件List列表组件使用详解)

    HarmonyOS鸿蒙应用开发( 四、重磅组件List列表组件使用详解)

    List列表组件，是一个非常常用的组件。可以说在一个应用中，它的身影无处不在。它包含一系列相同宽度的列表项，适合连续、多行呈现同类数据，如商品列表、图片列表和和文本列表等。ArkUI 框架采用 List 容器组件创建列表（类似 Android 的 RecycleView、Compose 的 LazyColumn）。

    2024年01月24日
    浏览(48)
  • HarmonyOS router页面跳转

    HarmonyOS router页面跳转

    默认启动页面index.ets 跳转目标页面TargetPage.ets 运行效果图如下：

    2024年02月21日
    浏览(31)
  • 鸿蒙Harmony-层叠布局（Stack）详解

    鸿蒙Harmony-层叠布局（Stack）详解

    我们总是为了太多遥不可及的东西去拼命，却忘了人生真正的幸福不过是灯火阑珊处的温暖，柴米油盐的充实，人生无论你赚的钱，是多还是少，经历的事情是好还是坏，都不如过好当下的每一天！  目录 一，定义 二，开发布局 三，对齐方式 3.1 TopStart顶部起始端  3.2 To

    2024年01月18日
    浏览(53)
  • 鸿蒙Harmony-列表组件（List）详解

    鸿蒙Harmony-列表组件（List）详解

    不要和别人比生活，每个人阶段不同，追求不同，活法自然也不同。只要今天的你能比昨天的你快乐一点点，那你就是自己人生赢家。 目录 一，定义 二，布局与约束 2.1 布局 2.2 约束 三，开发布局 3.1 设置主轴方向 3.2设置交叉轴布局 四，迭代列表内容 五，自定义列表样式

    2024年01月17日
    浏览(45)
  • 鸿蒙Harmony-相对布局（RelativeContainer）详解

    鸿蒙Harmony-相对布局（RelativeContainer）详解

    成年人的世界，从来没有容易二字，想要什么，就得凭自己的努力去拿，遇到事情就得自己生生的硬抗，希望你即使再辛苦，但还是会选择这滚烫的人生，加油陌生的朋友们 目录 一，定义 二，设置依赖关系 2.1 锚点设置 2.2 设置相对于锚点的对齐位置 RelativeContainer为采用相

    2024年02月01日
    浏览(51)
  • Harmony鸿蒙南向驱动开发流程

    Harmony鸿蒙南向驱动开发流程

    HDF（Hardware Driver Foundation）驱动框架，为驱动开发者提供驱动框架能力，包括驱动加载、驱动服务管理、驱动消息机制和配置管理。并以组件化驱动模型作为核心设计思路，让驱动开发和部署更加规范，旨在构建统一的驱动架构平台，为驱动开发者提供更精准、更高效的驱动

    2024年04月27日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包