1# 页面路由 2 3>  **说明** 4> 5> - 本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 6> - 页面路由需要在页面渲染完成之后才能调用，在onInit和onReady生命周期中页面还处于渲染阶段，禁止调用页面路由方法。 7 8## 导入模块 9 10``` 11import router from '@ohos.router' 12``` 13 14## 权限列表 15 16无 17 18## router.push 19 20push(options: RouterOptions): void 21 22跳转到应用内的指定页面。 23 24**系统能力：** SystemCapability.ArkUI.ArkUI.Full 25 26**参数：** 27| 参数名 | 类型 | 必填 | 说明 | 28| -------- | -------- | -------- | -------- | 29| options | [RouterOptions](#routeroptions) | 是 | 跳转页面描述信息。 | 30 31 32**示例：** 33 ```js 34 // 在当前页面中 35 export default { 36 pushPage() { 37 router.push({ 38 url: 'pages/routerpage2/routerpage2', 39 params: { 40 data1: 'message', 41 data2: { 42 data3: [123, 456, 789] 43 }, 44 }, 45 }); 46 } 47 } 48 ``` 49 ```js 50 // 在routerpage2页面中 51 export default { 52 data: { 53 data1: 'default', 54 data2: { 55 data3: [1, 2, 3] 56 } 57 }, 58 onInit() { 59 console.info('showData1:' + this.data1); 60 console.info('showData3:' + this.data2.data3); 61 } 62 } 63 ``` 64 65 66## router.replace 67 68replace(options: RouterOptions): void 69 70用应用内的某个页面替换当前页面，并销毁被替换的页面。 71 72**系统能力：** SystemCapability.ArkUI.ArkUI.Full 73 74**参数：** 75| 参数名 | 类型 | 必填 | 说明 | 76| -------- | -------- | -------- | -------- | 77| options | [RouterOptions](#routeroptions) | 是 | 替换页面描述信息。 | 78 79**示例：** 80 81 ```js 82 // 在当前页面中 83 export default { 84 replacePage() { 85 router.replace({ 86 url: 'pages/detail/detail', 87 params: { 88 data1: 'message', 89 }, 90 }); 91 } 92 } 93 ``` 94 95 ```js 96 // 在detail页面中 97 export default { 98 data: { 99 data1: 'default' 100 }, 101 onInit() { 102 console.info('showData1:' + this.data1) 103 } 104 } 105 ``` 106 107## router.back 108 109back(options?: RouterOptions ): void 110 111返回上一页面或指定的页面。 112 113**系统能力：** SystemCapability.ArkUI.ArkUI.Full 114 115**参数：** 116| 参数名 | 类型 | 必填 | 说明 | 117| -------- | -------- | -------- | -------- | 118| options | [RouterOptions](#routeroptions) | 是 | 返回页面描述信息，其中参数url指路由跳转时会返回到指定url的界面，如果页面栈上没有url页面，则不响应该情况。如果url未设置，则返回上一页，页面栈里面的page不会回收，出栈后会回收。 | 119 120**示例：** 121 ```js 122 // index页面 123 export default { 124 indexPushPage() { 125 router.push({ 126 url: 'pages/detail/detail', 127 }); 128 } 129 } 130 ``` 131 132 ```js 133 // detail页面 134 export default { 135 detailPushPage() { 136 router.push({ 137 url: 'pages/mall/mall', 138 }); 139 } 140 } 141 ``` 142 143 ```js 144 // mall页面通过back，将返回detail页面 145 export default { 146 mallBackPage() { 147 router.back(); 148 } 149 } 150 ``` 151 152 ```js 153 // detail页面通过back，将返回index页面 154 export default { 155 defaultBack() { 156 router.back(); 157 } 158 } 159 ``` 160 161 ```js 162 // 通过back，返回到detail页面 163 export default { 164 backToDetail() { 165 router.back({url:'pages/detail/detail'}); 166 } 167 } 168 ``` 169 170## router.clear 171 172clear(): void 173 174清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。 175 176**系统能力：** SystemCapability.ArkUI.ArkUI.Full 177 178**示例：** 179 ```js 180 export default { 181 clearPage() { 182 router.clear(); 183 } 184 }js 185 ``` 186 187## router.getLength 188 189getLength(): string 190 191获取当前在页面栈内的页面数量。 192 193**系统能力：** SystemCapability.ArkUI.ArkUI.Full 194 195**返回值：** 196| 类型 | 说明 | 197| -------- | -------- | 198| string | 页面数量，页面栈支持最大数值是32。 | 199 200**示例：** 201 ```js 202 export default { 203 getLength() { 204 var size = router.getLength(); 205 console.log('pages stack size = ' + size); 206 } 207 } 208 ``` 209 210## router.getState 211 212getState(): RouterState 213 214获取当前页面的状态信息。 215 216**系统能力：** SystemCapability.ArkUI.ArkUI.Full 217 218**返回值：** 219 220| 类型 | 说明 | 221| --------------------------- | -------------- | 222| [RouterState](#routerstate) | 页面状态信息。 | 223## RouterState 224页面状态信息。 225 226**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。 227 228| 名称 | 类型 | 说明 | 229| -------- | -------- | -------- | 230| index | number | 表示当前页面在页面栈中的索引。<br/>>  **说明：**<br/>> 从栈底到栈顶，index从1开始递增。 | 231| name | string | 表示当前页面的名称，即对应文件名。 | 232| path | string | 表示当前页面的路径。 | 233 234**示例：** 235 ```js 236 export default { 237 getState() { 238 var page = router.getState(); 239 console.log('current index = ' + page.index); 240 console.log('current name = ' + page.name); 241 console.log('current path = ' + page.path); 242 } 243 } 244 ``` 245 246## router.enableAlertBeforeBackPage 247 248enableAlertBeforeBackPage(options: EnableAlertOptions): void 249 250开启页面返回询问对话框。 251 252**系统能力：** SystemCapability.ArkUI.ArkUI.Full 253 254**参数：** 255| 参数名 | 类型 | 必填 | 说明 | 256| -------- | -------- | -------- | -------- | 257| options | [EnableAlertOptions](#enablealertoptions) | 是 | 文本弹窗信息描述。 | 258 259**示例：** 260 261 ```js 262 export default { 263 enableAlertBeforeBackPage() { 264 router.enableAlertBeforeBackPage({ 265 message: 'Message Info', 266 }); 267 } 268 } 269 ``` 270## EnableAlertOptions 271 272页面返回询问对话框选项。 273 274**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。 275 276| 名称 | 类型 | 必填 | 说明 | 277| -------- | -------- | -------- | -------- | 278| message | string | 是 | 询问对话框内容。 | 279 280## router.disableAlertBeforeBackPage 281 282disableAlertBeforeBackPage(): void 283 284禁用页面返回询问对话框。 285 286**系统能力：** SystemCapability.ArkUI.ArkUI.Full 287 288**示例：** 289 ```js 290 export default { 291 disableAlertBeforeBackPage() { 292 router.disableAlertBeforeBackPage(); 293 } 294 } 295 ``` 296 297## router.getParams 298 299getParams(): Object 300 301获取发起跳转的页面往当前页传入的参数。 302 303**系统能力：** SystemCapability.ArkUI.ArkUI.Full 304 305**返回值：** 306 307| 类型 | 说明 | 308| ------ | ---------------------------------- | 309| Object | 发起跳转的页面往当前页传入的参数。 | 310 311**示例：** 312 313- 类Web范示例 314 ```js 315 // 在当前页面中 316 export default { 317 pushPage() { 318 router.push({ 319 url: 'pages/detail/detail', 320 params: { 321 data1: 'message', 322 }, 323 }); 324 } 325 } 326 ``` 327 ```js 328 // 在detail页面中 329 export default { 330 onInit() { 331 console.info('showData1:' + router.getParams()[data1]); 332 } 333 } 334 ``` 335 336- 声明式示例 337 338 ```ts 339 //通过router.push跳转至目标页携带params参数 340 import router from '@ohos.router' 341 342 @Entry 343 @Component 344 struct Index { 345 async routePage() { 346 let options = { 347 url: 'pages/second', 348 params: { 349 text: '这是第一页的值', 350 data: { 351 array: [12, 45, 78] 352 }, 353 } 354 } 355 try { 356 await router.push(options) 357 } catch (err) { 358 console.info(` fail callback, code: ${err.code}, msg: ${err.msg}`) 359 } 360 } 361 362 build() { 363 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 364 Text('这是第一页') 365 .fontSize(50) 366 .fontWeight(FontWeight.Bold) 367 Button() { 368 Text('next page') 369 .fontSize(25) 370 .fontWeight(FontWeight.Bold) 371 }.type(ButtonType.Capsule) 372 .margin({ top: 20 }) 373 .backgroundColor('#ccc') 374 .onClick(() => { 375 this.routePage() 376 }) 377 } 378 .width('100%') 379 .height('100%') 380 } 381 } 382 ``` 383 384 ```ts 385 //在second页面中接收传递过来的参数 386 import router from '@ohos.router' 387 388 @Entry 389 @Component 390 struct Second { 391 private content: string = "这是第二页" 392 @State text: string = router.getParams()['text'] 393 @State data: any = router.getParams()['data'] 394 @State secondData : string = '' 395 396 build() { 397 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 398 Text(`${this.content}`) 399 .fontSize(50) 400 .fontWeight(FontWeight.Bold) 401 Text(this.text) 402 .fontSize(30) 403 .onClick(()=>{ 404 this.secondData = (this.data.array[1]).toString() 405 }) 406 .margin({top:20}) 407 Text('第一页传来的数值' + ' ' + this.secondData) 408 .fontSize(20) 409 .margin({top:20}) 410 .backgroundColor('red') 411 } 412 .width('100%') 413 .height('100%') 414 } 415 } 416 ``` 417 418## RouterOptions 419 420路由跳转选项。 421 422**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Lite。 423 424| 名称 | 类型 | 必填 | 说明 | 425| -------- | -------- | -------- | -------- | 426| url | string | 是 | 表示目标页面的uri，可以用以下两种格式：<br/>- 页面绝对路径，由配置文件中pages列表提供，例如：<br/> - pages/index/index<br/> - pages/detail/detail<br/>- 特殊值，如果uri的值是"/"，则跳转到首页。 | 427| params | Object | 否 | 跳转时要同时传递到目标页面的数据，跳转到目标页面后，参数可以在页面中直接使用，如this.data1(data1为跳转时params参数中的key值)。如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 | 428 429 430 >  **说明：** 431 > 页面路由栈支持的最大Page数量为32。 432 433
