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页面会移动到栈顶，如果不存在，按照多实例模式进行跳转