HarmonyOS开发之页面跳转router

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 *文件中添加对应的标识。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容