美文网首页
鸿蒙~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}`);
  })
}

相关文章

  • Vue路由全解

    路由基础 router-link router-view router.js 动态路由匹配 嵌套路由 命名路由 命...

  • 2019-06-30

    路由基础 :用来生成路由器连接< router-link to ="/xxx"> G...

  • vue路由传参

    路由基础知识 router和route的区别 route,是一个路由。 routes,是一组路由。 router,...

  • react路由基础(Router、Link和Route)

    react路由基础(Router、Link和Route)

  • react路由基础(Router、Link和Route)

    react路由基础(Router、Link和Route) Router:Router我们可以把它看做是react路...

  • 路由基本使用

    使用Anglar Router导航 路由基础,路由相关对象 Routes 路由配置,保存着url对应展示哪个组件,...

  • react-router-dom初探

    react-router是路由组件核心,而react-router-dom是在react-router的基础上扩展...

  • vue-router

    路由详解-基础 router-link和router-view组件 router-link: 封装了一个a标签ro...

  • Vue-基础-05-重点

    Vue-基础-day05-重点 01-基础-路由-vue-router-嵌套路由 children用法和route...

  • 初识Vue-router笔记

    详细教程:Vue Router菜鸟 基础 一、 安装 二、 起步 1. 接入vue-router 2. 路由入口:...

网友评论

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

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