美文网首页
鸿蒙~ArtUI基础开发 Router -- 路由

鸿蒙~ArtUI基础开发 Router -- 路由

作者: 胡修波 | 来源:发表于2023-12-19 15:56 被阅读0次

    Router用于页面之间的跳转

    两种跳转方式:

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

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

    • 说明:
      页面栈的最大容量为32个页面。如果超过这个限制,可以调用router.clear()方法清空历史页面栈,释放内存空间

    • 同时,Router模块提供了两种实例模式,分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。----可能面试题
      Standard:标准实例模式,也是默认情况下的实例模式。每次调用该方法都会新建一个目标页,并压入栈顶。
      Single:单实例模式。即如果目标页的url在页面栈中已经存在同url页面,则离栈顶最近的同url页面会被移动到栈顶,并重新加载;如果目标页的url在页面栈中不存在同url页面,则按照标准模式跳转。

    • 导入Router模块

    import router from '@ohos.router';
    
    • 简单使用
    router.pushUrl({url : "pages/Mypage"})
    
    • 带模式
     router.pushUrl({url : "pages/Mypage"}, router.RouterMode.Single)
    
    • 跳转完成后,销毁第一个页面
    router.replaceUrl({url : "pages/Mypage"})
    
    • 带有参数
    router.pushUrl({url: "pages/MyPage", params: {name: "huxiubo"}})
    
    • 目标页面,onPageShow()中 接收参数
      onPageShow() {
        const param = router.getParams();
        if (param != undefined) { // 做个判断
            const name = param["name"] as string
            console.info(TAG, `age :${name}`);
        }
      }
    
    • 返回上一个页面
    router.back();
    
    • 返回到指定页面 , 注意有问题,不建议这么用,Home页面没在页面栈中时候没有反应
    router.back({
      url: 'pages/Home'
    });
    
    • 返回到指定页面,并传递自定义参数信息
    router.back({
      url: 'pages/Home',
      params: {
        info: '来自Home页'
      }
    });
    
    • 页面返回前增加一个询问框
      需要 router.showAlertBeforeBackPage()、router.back(); 一起用
    // 定义一个返回按钮的点击事件处理函数
    function onBackClick(): void {
      // 调用router.showAlertBeforeBackPage()方法,设置返回询问框的信息
      try {
        router.showAlertBeforeBackPage({
          message: '您还没有完成支付,确定要返回吗?' // 设置询问框的内容
        });
      } catch (err) {
        console.error(`Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}`);
      }
    
      // 调用router.back()方法,返回上一个页面
      router.back();
    }
    
    • 自定义询问框
      在事件回调中,调用弹窗的promptAction.showDialog()方法
    function onBackClick() {
      // 弹出自定义的询问框
      promptAction.showDialog({
        message: '您还没有完成支付,确定要返回吗?',
        buttons: [
          {
            text: '取消',
            color: '#FF0000'
          },
          {
            text: '确认',
            color: '#0099FF'
          }
        ]
      }).then((result) => {
        if (result.index === 0) {
          // 用户点击了“取消”按钮
          console.info('User canceled the operation.');
        } else if (result.index === 1) {
          // 用户点击了“确认”按钮
          console.info('User confirmed the operation.');
          // 调用router.back()方法,返回上一个页面
          router.back();
        }
      }).catch((err) => {
        console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`);
      })
    }
    

    相关文章

      网友评论

          本文标题:鸿蒙~ArtUI基础开发 Router -- 路由

          本文链接:https://www.haomeiwen.com/subject/tyizgdtx.html