首页 > 其他分享 >笔记 harmonyOS 页面跳转及传递参数

笔记 harmonyOS 页面跳转及传递参数

时间:2025-01-09 15:34:00浏览次数:3  
标签:URL harmonyOS mode 跳转 push router 页面

        页面之间的导航可以通过页面路由router模块来完成。页面路由模块根据页面的URL找到目标页面,从而实现跳转。通过页面路由模块,可以使用不同的URL访问不同的页面,包括跳转到Ability内的指定页面、用Ability内的某个页面替换当前页面、返回上一个页面或指定的页面。通过params来传递参数。

        在使用页面路由需要导入router模块,代码如下:

//导入router模块
import router from 'ohos.router'

页面跳转有4种方式:

1.router.push()

         通过调用router.push()方法,跳转到Ability内的指定页面。每一次调用router.push()方法,都会新建一个页面。默认情况下,页面栈数量会加1,页面栈支持的最大页面数量为32。

        如果页面栈的数量超过了32,可以通过使用router.clear()方法清除页面栈中的所有历史页面。

代码如下:

router.push({
    url:'pages/fenghua',
    params:{
        src:'Index 页面传递过来的数据',
    }

})

2.router.push()加mode参数

        router.push()方法新增加了mode参数,可以将mode参数配置为router.RouterMode.Single 单实例模式和router。routerModeStandard标准模式。

        在 单实例模式下,如果目标页面在页面栈中已经存在同URL的页面,离栈顶最近的同URL的页面会被移动到栈顶,移动后的页面为新建页面,原来的页面依然保存在栈中,页面栈的数量不会改变。如果目标页面在页面栈中不存在同URL的页面,那么按照标准模式进行跳转,页面栈的数量会加1.

代码如下:

router.push({
    url:'pages/fenghua'
    params:{src:'Index页面传递过来的数据',}

},router.RouterMode.Single)

3.router.replace()  

        通过调用router.replace()方法,跳转到Ability内的指定页面。即使用新的页面替换当前页面,并销毁被替换的当前页面,页面栈数量依然不变。

代码如下:

router.replace({
    url:'pages/fenghua'
    params:{
    src:'Index页面传递来的数据'
   }

})

4.router.replace()加mode参数

        router.replace()方法新增了mode参数,可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterModer,Standard标准模式。

        在当实例模式下,如果目标页面在页面栈中已经存在同URL的页面,离栈顶最近的同RUL的页面会被移动到栈顶,替换当前页面,并销毁被替换的当前页面,移动后的页面为新建页面,页面栈的数量会减一。如果目标页面在页面页面栈中不存在同URL的页面,那么按照标准模式跳转,页面栈的数量不会改变。

代码如下:

router.replace({
    url:'pages/fenghua',
    params:{
        src:'Index页面传递过来的数据',
   }
},router.RouterModer.Single)

标签:URL,harmonyOS,mode,跳转,push,router,页面
From: https://blog.csdn.net/2401_87008233/article/details/145033743

相关文章

  • 【HarmonyOS NEXT】一多开发介绍(断点、媒体查询、栅格布局)
    断点鸿蒙提供断点以应用窗口宽度为切入点,将应用窗口在宽度维度上分成了几个不同的区间即不同的断点,不同设备会进入到不同的断点区间,在不同的区间下,我们可以可根据需要实现不同的页面布局效果。具体的断点对应的设备尺寸如下所示。断点名称取值范围(vp)xs[0,320)sm[320,600)......
  • 全面解析 Keycloak 自定义主题:打造品牌化 OAuth 登录页面的终极指南
    言简意赅的讲解Keycloak主题解决的痛点之前给大家讲解了Keycloak一键登录后大家也解决了SSO登录的问题。这时候大家觉得Keycloak登录页太丑了,所以本篇文章讲讲如何让登录页好看。1.1提升品牌一致性在大型项目或企业环境中,登录页面是对外最直观的形象展现。Keycloak虽......
  • HTML+CSS+JS制作中华传统文化主题网站(内附源码,含5个页面)
    一、作品介绍HTML+CSS+JS制作一个中华传统文化主题网站,包含首页、文化艺术页、传统工艺页、文化遗产页、关于我们页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。二、页面结构1.顶部导航区包含网站Logo、主导航菜单(首页、文化分类、活动......
  • HTML+CSS+JS制作中华传统美食主题网站(内附源码,含5个页面)
    一、作品介绍HTML+CSS+JS制作一个中华传统文化主题网站,包含首页、菜系页、食材页、名厨页、美食故事页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。二、页面结构1.顶部横幅导航区包含网站Logo、搜索栏、主导航菜单(首页、菜系分类、美食故......
  • 小程序开发-页面事件之上拉触底实战案例
    ......
  • raylib U1S05 - 添加一个开始页面
    先来看效果看之前让我吐个槽。刚才编辑一半,结果我手贱点了个退出登录,然后都没了˃̣̣̥᷄⌓˂̣̣̥᷅开始按钮的图片是用豆包AI生成的,然后用美图秀秀抠图,改颜色。懒得自己搞素材的同学保存下面的三个图,注意改名字。普通状态鼠标放上去鼠标点击start_normal.p......
  • WPF页面中将一个控件的宽度绑定到其父级用户控件的实际宽度
    该实际场景比较常见于,当存在多个用户控件页面拼成一个窗体,因为实际控件对应窗体的宽度并不能确定,也不是那种能指定的宽度或者高度,比如窗体分导航区域和内容区域,左侧导航区域可以直接指定宽度,而右侧内容区域则是使用Auto或者*的宽度。在WPF中,尝试将一个控件的宽度绑定到其父级用户......
  • Xinstall HarmonyOS SDK:助力鸿蒙生态,开启智能应用新篇章!应用集成即享10天专业版免费使
    10月22日,华为正式发布了HarmonyOSNEXT原生鸿蒙系统。自问世以来,凭借其独特的分布式特性与创新交互,在智能设备领域掀起了一场革新风暴,吸引着无数开发者投身其中,探索无限可能。目前,已有超1万个应用和元服务上架HarmonyOSNEXT应用市场,华为开发者联盟注册开发者数量已增长......
  • 【转】[Vue] 如何避免页面出现 {{ }}
    在Vue中,页面上出现{{}}通常是因为数据绑定的问题,导致模板中的表达式没有被正确解析。以下是一些防止页面出现{{}}的方法:确保数据正确绑定使用 v-bind 或简写 :对于对象属性的绑定,确保使用 v-bind 或简写 : 来绑定数据。例如,使用 :style="styleObject" 而不是......
  • nuxt 路由跳转和传参方式
    1.使用nuxt-link传参nuxt-link用于页面间的跳转,并且支持传递参数。可以通过两种方式传参:a.使用params传参params是通过动态路由来传递的参数,通常用于URL的路径中。<ul><li><nuxt-linkto="/">首页</nuxt-link></li><li><nuxt-link:to="{name......