当前位置:   article > 正文

鸿蒙 HarmonyOS Next 路由 不废话 全干货_鸿蒙路由传参

鸿蒙路由传参

一、页面的创建

(1)直接通过创建一个新的Page的方式创建

(2)先创建一个 ArkTs File文件,然后在resources/base/profile/main_pages.json中加上页面对应的src路径,下面的Index_3.ets文件是通过创建ArkTs File文件生成的,需要加上src路径

加上路径后的显示:

 

二、路由 - 操作

首先导入:

import router from 'ohos.router'

普通跳转(可以返回)

相当于栈,可以每次跳转都是入栈,每次返回都是出栈,页面栈的最大容量是32个页面

提示:页面地址是resources/base/profile/main_pages.json里的src地址

  1. router.pushUrl({
  2.         url:'页面地址'
  3. })

替换跳转(无法返回)

提示:页面地址是resources/base/profile/main_pages.json里的src地址

  1. router.replaceUrl({
  2.         url:'页面地址'
  3. })

返回

router.back()

获取页面栈的长度

router.getLength()

清空页面栈 

router.clear()

三、路由模式

两种路由模式:

Standard:无论之前是否使用过,一直添加到页面栈中(默认)

Single:如果目标页面已存在,会将已有的最近同url页面移到栈顶

路由模式的设置方式

在挑战页面的第二个参数设置路由模式

router.pushUrl(options,mode)

示例:

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

四、路由传参

传递参数的示例:

router.pushUrl({
  url:'pages/Index_3',
  params: {
    username:this.username
  }
})

接受参数的示例:

aboutToAppear():void{

  console.log(JSON.stringify(router.getParams()))
  const params = router.getParams() as 类型

  //例如,获取params中的username属性
  console.log('我的用户名是'+params.username)

}

五、demo演示

第一个页面:Index.ets (效果:跳转的到Index_2.ets页面)

  1. import router from '@ohos.router'
  2. @Entry
  3. @Component
  4. struct Index {
  5. build(){
  6. Column() {
  7. Text('第一个页面')
  8. .fontSize(50)
  9. .onClick(()=>{
  10. router.pushUrl({
  11. url:'pages/Index_2'
  12. },router.RouterMode.Single)
  13. })
  14. }
  15. }
  16. }

第二个页面:Index_2.ets(效果:跳转的到Index_3.ets页面,同时传递参数username)

  1. import router from '@ohos.router';
  2. @Entry
  3. @Component
  4. struct Index_2 {
  5. @State username:string = 'csh'
  6. build(){
  7. Column() {
  8. Text('第二个页面')
  9. .fontSize(50)
  10. .onClick(()=>{
  11. router.pushUrl({
  12. url:'pages/Index_3',
  13. params: {
  14. username:this.username
  15. }
  16. })
  17. })
  18. }
  19. }
  20. }

第三页面:Index_3.ets(效果:接收Index_2.ets页面传递来的参数并通过日志输出)

  1. import router from '@ohos.router';
  2. interface ParamsObj{
  3. username:string
  4. }
  5. @Entry
  6. @Component
  7. struct Index_3 {
  8. aboutToAppear():void{
  9. console.log(JSON.stringify(router.getParams()))
  10. const params = router.getParams() as ParamsObj
  11. console.log('我的用户名是'+params.username)
  12. }
  13. build(){
  14. Column() {
  15. Text('第三个页面')
  16. .fontSize(50)
  17. }
  18. }
  19. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/人工智能uu/article/detail/944314
推荐阅读
相关标签
  

闽ICP备14008679号