HarmonyOS开发之路由跳转

文章目录


一、路由跳转模式与实例

跳转模式 有点类似于vue的路由跳转

  • router.pushUrl 保留路由栈,保留当前的页面;
  • router.replaceUrl 销毁当前页面,跳转一个新的页面 ;
  • router.back 返回上个路由栈保存的页面;

跳转实例

  • router.RouterMode.Standard 默认模式 压入栈顶;
  • router.RouterMode.Single 如果跳转的目标页在路由栈中已经存在,那么就会将距离栈顶最近的url放到栈顶,并重新加载。如果不存在 将按照默认模式执行;

1.router.pushUrl

复制代码
import router from '@ohos.router'

//跳转到新的页面 保留当前路由栈
  router.pushUrl(
  {
      //跳转路径
      url:'pages/HomePage',
      //传递参数
       params:{id:1}
   },
       //默认模式
       router.RouterMode.Standard,
    (err) => {
     if(err){
        console.log('路由失败')
     }
   }
    )
})




//接取参数
router.getParams()['id']

2.router.replaceUrl

复制代码
import router from '@ohos.router'

//跳转到新的页面 保留当前路由栈
  router.replaceUrl (
  {
      //跳转路径
      url:'pages/HomePage',
      //传递参数
       params:{id:1}
   },
       //默认模式
       router.RouterMode.Standard,
    (err) => {
     if(err){
        console.log('路由失败')
     }
   }
    )
})




//接取参数
router.getParams()['id']

3.router.back

复制代码
import router from '@ohos.router'

    //1、直接返回
    router.back();
    
    //2、返回到指定页面
    router.back({
       url: 'pages/Info'
   });

 //3、返回到指定页面,并传递自定义参数信息
 router.back({
     url: 'pages/Info',
     params: {
      id:1
    }
 });


//4、系统默认返回询问框
   router.showAlertBeforeBackPage({
      message:'确定返回到login页面吗?'
     })
   router.back()


  
   //5、自定义询问框
   import promptAction from '@ohos.promptAction'

   promptAction.showDialog({
         message:'确定返回到login页面吗?',
         buttons: [
         {
           text: '取消',
           color: '#FF0000'
         },
          {
           text: '确认',
           color: '#0099FF'
           }
         ]
        }).then((result)=>{
          if(result.index === 0){
             console.log('点击了取消按钮')
          }else if(result.index === 1){
             // 用户点击了"确认"按钮
             console.log('用户点击了"确认"按钮')
            // 调用router.back()方法,返回上一个页面
              router.back();
            }
         }).catch(err => {
           console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`);
       })
    })
相关推荐
前端世界2 小时前
鸿蒙系统安全机制全解:安全启动 + 沙箱 + 动态权限实战落地指南
android·安全·harmonyos
长弓三石4 小时前
鸿蒙网络编程系列57-仓颉版固定包头可变包体解决TCP粘包问题
网络·tcp/ip·harmonyos
zhanshuo4 小时前
HarmonyOS 隐私安全机制实战:动态权限、沙箱隔离与分布式授权
harmonyos
zhanshuo5 小时前
鸿蒙系统防黑秘籍:如何彻底防止恶意应用窃取用户数据?
harmonyos
财经三剑客8 小时前
鸿蒙智行6月交付新车52747辆 单日交付量3651辆
华为·harmonyos
睿麒8 小时前
鸿蒙app 开发中的 map 映射方式和用法
华为·harmonyos
zhanshuo10 小时前
鸿蒙 Secure Boot 全流程解析:从 BootROM 到内核签名验证的实战指南
harmonyos
zhanshuo11 小时前
鸿蒙系统安全机制全解:安全启动 + 沙箱 + 动态权限实战落地指南
harmonyos
塞尔维亚大汉11 小时前
鸿蒙内核源码分析(用户态锁篇) | 如何使用快锁Futex(上)
harmonyos·源码阅读
爱笑的眼睛1121 小时前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos