欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 产业 > HarmonyOS路由之Router(页面路由)

HarmonyOS路由之Router(页面路由)

2025/6/8 18:32:03 来源:https://blog.csdn.net/weixin_58881409/article/details/145998982  浏览:    关键词:HarmonyOS路由之Router(页面路由)

Router

1:概念

  • 页面路由指的是在应用程序中实现不同页面之间的跳转,以及数据传递模式
  • import { router } from ‘@kit.ArkUI’;
  • onInit和onReady生命周期页面还在处于渲染阶段,禁止调用
  • 为了更好的转场效果,推荐使用Navigation组件(导航组件,一般配合路由使用)
  • 实现路由跳转,最基本的需求是本页面与跳转页面都在resource目录下的profile的page_main.json文本进行注册

2:页面创建

  1. 直接右边键新建页面(page)
  2. 新建普通ets文件,配置成页面
    • 新建普通页面:pages/DetailPage.ets
    • 文件位置—->main_pages.json (配置路由)

3:路由的使用

/** option:RouterOptions*      url:string 表示目标页面的url(必选项)*        pages列表提供,pages/.... 页面绝对路径*        特殊值:'/' 则跳转首页,首页默认页面跳转配置项src数组的第一个**      params: Object 不是必选项*              表示路由跳转时,要同时传递到目标页的数据,切换到其他页面时,当前接收的数据会失效*              跳转到目标页面后,通过router.getParams() 来获取传递的参数*      mode:跳转模式:router.RouterMode.Single(单例), router.RouterMode.Standard(多例)*/

3.1:router.pushUrl

  • 跳转到应用的指定页面,并将该页面压入栈顶
          router.pushUrl({url: 'pages/router_01',params: 'nihao'},router.RouterMode.Standard,(err) => {if (err) {console.log('')}console.log('')})

3.2:router.replaceUrl

  • 应用内给某个页面替换当前页面,并销毁被替换的页面
  router.replaceUrl({url:'pages/router_01'},(err)=>{if (err) {console.log(`${err}`)}console.log('replaceUrl success')})

3.3:router.pushNameRoute

  • 在开发中,为了跳转到共享包Har(静态资源包)或者Hsp(动态资源包),可以使用router.pushNameRoute( )实现

3.4:router.back

  • router.back( ) 返回指定页面,指定页面的上面页面将会顶出
/** router.back(index:number,params:Object)*    第一种写法:12+*      index:跳转目标页面的索引值,页面索引从1开始计算*      params:页面返回值所带的参数*    第二种写法:*      options*        url:页面路由* 路由跳转时会返回的指定url的界面,如果页面栈没有url,则无法跳转,如果为设置url则返回上一页,页面不会重新构建(页面相当于pop出)* url不能设置特殊值‘/’不生效* 页面栈里面的page不会回收,如果出栈则会回收* */

3.5:router.clear

  • router.clear 清空页面栈中所有历史页面,仅保留当前页面作为栈顶页面

3.6:router.getLeangth

  • 获取当前页面栈的长度
  • 注意:当前页面调用router类型的方法时,当前页面会自动压入栈中

3.7:router.getState

/**  获取栈顶的页面状态信息(name:栈顶名称   index:栈顶索引    path:栈顶路径   params:携带参数(12版本才有))*    router.getState.name    router.getState.index   router.getState.path    router.getState.params(12+)* */

3.8:router.getStateByIndex

  • 通过索引值获取对应页面的状态信息与getState有相同的属性(name index path params)

3.9:router.getStateByUrl

  • 12+ 数组(多实例模里面可能有多个相同的页面)
  • 通过url值获取对应页面的状态信息与getState有相同的属性(name index path params)

4:页面路由的错误码

  • 100001 内容错误,未成功获取渲染引擎,解析参数失败
  • 100002 内部页面跳转时url输入错误
  • 100003 路由压入的page过多,最大的路由页面数为32
  • 100004 命名路由输入的name错误
  • 100005 Navigation跳转未注册的builder函数
  • 100006 Navigation跳转时目标页面不存在NavDestionation组件
  • 200002 路由页面替换时输入的url错误

5:RouterMode

5.1:RouterMode.Standard
  • RouterMode.standard 多实例模型(默认),当push路由跳转时,目标页面会被添加到页面栈顶,无论栈中是否存在相同的url页面
5.2:RouterMode.Single
  • RouterMode.Single 单实例模型,如果目标页面的url已经存在于页面栈中,则该url页面会移动到栈顶,如果不存在,按照多实例模式进行跳转

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词