美文网首页
HarmonyOS开发之页面跳转router

HarmonyOS开发之页面跳转router

作者: 东方三篇 | 来源:发表于2024-05-23 17:17 被阅读0次

HarmonyOS开发之页面跳转

1. 使用 router 进行页面跳转以及传递参数

  • 引入router模块

    import router from '@ohos.router';
    
  • 调用router模块。 实现功能从first页面跳转到second页面,并携带参数, 在second页面接收参数,并跳转回first页面。

    # First page
    import router from '@ohos.router'
    
    Button('to second').onClick(() => {
      router.pushUrl({ # push还有replaceUrl方式。
          url: 'pages/second', # 参数必填
          params: { # 不需要传递参数时,该选项可以不填
              src: '要传递给second页面的参数信息'
          }
      }, router.RouterMode.Single) # router.RouterMode.Single单实例模式,router.RouterMode.Standard多实例模式。
    })
    
    # Second page
    import router from '@ohos.router'
    
    @State src:string = (router.getParams() as Record<string, string>)['src'] # 获取first页面传递进来的参数
    
    Button('go back').onClick(() => {
      router.back() # 跳转回上一个页面 调用router.back()返回的目标页面需要在页面栈中存在才能正常跳转。
      router.back({ url: 'pages/first'}) # 也可以表明返回到指定页面
    })
    
  • 其他说明-- 注册路由信息

在DevSco Studio 编译器中,entry/main/ets/pages目录上右键新增 page 时候,编译器或默认在entry/main/resources/base/profile/main_pages.json文件中自动生成 "pages/second" 的页面标识。

如果没有使用上述方法添加页面page,就要手动到 *entry/main/resources/base/profile/main_pages.json *文件中添加对应的标识。

相关文章

  • Flutter 之Router 页面跳转

    Flutter 之Router 页面跳转 页面跳转在移动开发中是很常见的事情,在Android中打开另外一个页面主...

  • vue路由传参

    vue是一个单页面的开发框架,在开发的过程中,页面需要利用vue-router进行跳转,页面的跳转肯定会牵扯到页面...

  • 使用Java开发HarmonyOS

    开发准备 本文适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转功能的应用(如下图预览器运行...

  • 21.记录Vue项目router中replace需要返回两次问题

    需求:通过A页面跳转B页面,B页面跳出C页面,C页面跳转B页面,A-B-C-B使用 $router.replace...

  • vue中通过路由跳转的三种方式

    1、router-link 【实现跳转最简单的方法】 注意:跳转的链接要在路由...

  • 【Flutter】开发之功能篇(六)

    前言 这一篇,我们说说开发中会用到的地方。 【Flutter】开发之目录 页面跳转 Flutter的页面跳转,主要...

  • 路由Router

    Router 路由(页面跳转) MaterialPageRoute构造函数 MaterialPageRoute M...

  • 移动开发 - Router组件

    在移动开发中讨论到Router的时候,一般直接想到的样式是这样子: 引入Router后,页面/组件之间的跳转依赖于...

  • vue导航守卫

    在开发过程经常会遇到譬如在没有登录时点击页面内容,提醒用户登录,跳转到登录页面的需求等等;vue-router提供...

网友评论

      本文标题:HarmonyOS开发之页面跳转router

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