作者：张明伟

前言

​   在开发过程中，页面路由对于一个应用是必不可少的。在OpenHarmony中，页面路由指在应用程序中实现不同页面之间的跳转和数据传递，路由的使用需要使用到”@ohos.router“。在进行页面跳转的时候，如果不知道页面路由的跳转原理，对于页面路由的使用则会很混乱。

一.开发环境

DevEcoStudio版本：DevEco Studio 4.0 Release

SDK版本：3.2.2.5

API版本：10

二.简单使用

1.页面栈

对于路由的使用需要理解一个重要的概念：页面栈,就是一个存放页面路由的栈，当页面进行跳转的时候会将页面路由进行入栈或出栈操作。

可以通过router.getLength()获取当前页面栈的长度。

通过router.getState()获取当前页面的路由信息

Interface RouterState{index:number,name:string,path:string}

注意：(1)页面栈的最大容量为32个页面。如果超过这个限制，可以调用router.clear()方法清空历史页面栈，释放内存空间。

​     (2)当页面存在于页面栈的时候，会保存页面的状态，当页面出栈的时候，则会销毁页面。调用aboutToDisappear()

2.pushUrl  和replaceUrl 2种跳转模式

两者的区别在于目标页面是否会替换当前页面。

可以通过3个页面之间的跳转来说明：

跳转顺序  page1(pushUrl)->page2(pushUrl)->page3

当调用router.back()或者按下返回按钮时，使用pushUrl页面跳转顺序为：page3-->page2->page1

跳转顺序  page1(pushUrl)->page2(replaceUrl)->page3

使用replaceUrl 的页面跳转顺序为：page3->page1。

使用replaceUrl会替换页面栈栈顶的路由，且无法回到原来的页面。

3.页面返回

返回上一个页面：router.back()

返回指定页面：router.back({url:"pages/index",params:{params1:"z1"}})

注意：当使用router.back()方法返回到指定页面时，该页面会被重新压入栈顶，而原栈顶页面（包括）到指定页面（不包括）之间的所有页面栈都将被销毁。

4.路由参数传递

传递参数：

  router.pushUrl({

                url:"pages/firstPage",

                params:{params1:"zmw1",params2:"zmw2"}

              })

获取参数：

  @State params: any = router.getParams()

   console.log(this.params.params1)

这里params是一个对象。

4.路由的模式

分为两种模式：Standard和single  ，通过router.RouterMode获取。

两者的主要区别是在路由栈里，页面的路由是否是单例的。single表示在路由栈里路由存在一个实例，进行页面跳转时页面栈的数量不会增加。Standard表示可以有多个，页面栈的数量会增加。

  router.pushUrl({

              url:"pages/firstPage",

              params:{params1:"zmw1",params2:"zmw2"}

            },router.RouterMode.Single)

当使用single的时候，若页面已存在于页面栈且是相同的single模式,进行页面跳转的时候相当于将目标页面那一个页面路由从下面移动到了栈顶，没有使用single模式的相同页面则不受影响。

经过测试发现：single模式进行页面跳转的时候，页面已存在于页面栈，则不会进行对aboutToAppear()页面生命周期函数的调用。若出栈时则会对aboutToDisappear()的调用。

三.总结

使用场景:1.页面间数据传递。2.通过不同的返回结果跳转不同的页面。

需要扩展的知识点是：Tabs组件的跳转，web组件的路由，页面生命周期函数，设备之间控制页面的跳转。

四.参考

url_demo

openharmony 路由概述

openharmony ArkTs接口参考

更多原创内容请关注：中软国际OpenHarmony技术团队

入门到精通、技巧到案例，系统化分享OpenHarmony开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。