1# 页面路由 2 3> **说明：** 4> 5> - 从API Version 8 开始，该接口不再维护，推荐使用新接口[`@ohos.router`](js-apis-router.md)。 6> 7> 8> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 9 10 11## 导入模块 12 13 14```js 15import router from '@system.router'; 16``` 17 18## router.push 19 20push(options: RouterOptions): void 21 22跳转到应用内的指定页面。 23 24**系统能力：** SystemCapability.ArkUI.ArkUI.Full 25 26**参数：** 27 28| 参数名 | 类型 | 必填 | 说明 | 29| ------- | ------------------------------- | ---- | -------------------------- | 30| options | [RouterOptions](#routeroptions) | 是 | 页面路由参数，详细请参考RouterOptions。 | 31 32**示例：** 33 34```js 35// 在当前页面中 36export default { 37 pushPage() { 38 router.push({ 39 uri: 'pages/routerpage2/routerpage2', 40 params: { 41 data1: 'message', 42 data2: { 43 data3: [123, 456, 789] 44 }, 45 }, 46 }); 47 } 48} 49``` 50 51 52```js 53// 在routerpage2页面中 54export default { 55 data: { 56 data1: 'default', 57 data2: { 58 data3: [1, 2, 3] 59 } 60 }, 61 onInit() { 62 console.info('showData1:' + this.data1); 63 console.info('showData3:' + this.data2.data3); 64 } 65} 66``` 67 68>  **说明：** 69> 页面路由栈支持的最大Page数量为32。 70 71 72## router.replace 73 74replace(options: RouterOptions): void 75 76用应用内的某个页面替换当前页面，并销毁被替换的页面。 77 78**系统能力：** SystemCapability.ArkUI.ArkUI.Lite 79 80**参数：** 81 82| 参数名 | 类型 | 必填 | 说明 | 83| ------- | ------------------------------- | ---- | -------------------------- | 84| options | [RouterOptions](#routeroptions) | 是 | 页面路由参数，详细请参考RouterOptions。 | 85 86**示例：** 87 88```js 89// 在当前页面中 90export default { 91 replacePage() { 92 router.replace({ 93 uri: 'pages/detail/detail', 94 params: { 95 data1: 'message', 96 }, 97 }); 98 } 99} 100``` 101 102 103```js 104// 在detail页面中 105export default { 106 data: { 107 data1: 'default' 108 }, 109 onInit() { 110 console.info('showData1:' + this.data1) 111 } 112} 113``` 114 115## router.back 116 117back(options?: BackRouterOptions): void 118 119返回上一页面或指定的页面。 120 121**系统能力：** SystemCapability.ArkUI.ArkUI.Full 122 123**参数：** 124 125| 参数名 | 类型 | 必填 | 说明 | 126| ------- | --------------------------------------- | ---- | ----------------------- | 127| options | [BackRouterOptions](#backrouteroptions) | 是 | 详细请参考BackRouterOptions。 | 128 129**示例：** 130 131```js 132// index页面 133export default { 134 indexPushPage() { 135 router.push({ 136 uri: 'pages/detail/detail', 137 }); 138 } 139} 140``` 141 142 143```js 144// detail页面 145export default { 146 detailPushPage() { 147 router.push({ 148 uri: 'pages/mall/mall', 149 }); 150 } 151} 152``` 153 154 155```js 156// mall页面通过back，将返回detail页面 157export default { 158 mallBackPage() { 159 router.back(); 160 } 161} 162``` 163 164 165```js 166// detail页面通过back，将返回index页面 167export default { 168 defaultBack() { 169 router.back(); 170 } 171} 172``` 173 174 175```js 176// 通过back，返回到detail页面 177export default { 178 backToDetail() { 179 router.back({uri:'pages/detail/detail'}); 180 } 181} 182``` 183 184>  **说明：** 185> 示例中的uri字段是页面路由，由配置文件中的pages列表指定。 186 187## router.getParams 188 189getParams(): ParamsInterface 190 191获取当前页面的参数信息。 192 193**系统能力：** SystemCapability.ArkUI.ArkUI.Full 194 195**返回值：** 196 197| 类型 | 说明 | 198| ----------------------------------- | --------------------- | 199| [ParamsInterface](#paramsinterface) | 详细请参见ParamsInterface。 | 200 201## router.clear 202 203clear(): void 204 205清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。 206 207**系统能力：** SystemCapability.ArkUI.ArkUI.Full 208 209**示例：** 210 211```js 212export default { 213 clearPage() { 214 router.clear(); 215 } 216} 217``` 218 219## router.getLength 220 221getLength(): string 222 223获取当前在页面栈内的页面数量。 224 225**系统能力：** SystemCapability.ArkUI.ArkUI.Full 226 227**返回值：** 228 229| 类型 | 说明 | 230| ------ | ------------------ | 231| string | 页面数量，页面栈支持最大数值是32。 | 232 233**示例：** 234 235```js 236export default { 237 getLength() { 238 var size = router.getLength(); 239 console.log('pages stack size = ' + size); 240 } 241} 242``` 243 244## router.getState 245 246getState(): RouterState 247 248获取当前页面的状态信息。 249 250**系统能力：** SystemCapability.ArkUI.ArkUI.Full 251 252**返回值：** 253 254| 参数类型 | 说明 | 255| --------------------------- | ----------------- | 256| [RouterState](#routerstate) | 详细请参见RouterState。 | 257 258**示例：** 259 260```js 261export default { 262 getState() { 263 var page = router.getState(); 264 console.log('current index = ' + page.index); 265 console.log('current name = ' + page.name); 266 console.log('current path = ' + page.path); 267 } 268} 269``` 270 271## router.enableAlertBeforeBackPage<sup>6+</sup> 272 273enableAlertBeforeBackPage(options: EnableAlertBeforeBackPageOptions): void 274 275开启页面返回询问对话框。 276 277**系统能力：** SystemCapability.ArkUI.ArkUI.Full 278 279**参数：** 280 281| 参数名 | 类型 | 必填 | 说明 | 282| ------- | ---------------------------------------- | ---- | -------------------------------------- | 283| options | [EnableAlertBeforeBackPageOptions](#enablealertbeforebackpageoptions6) | 是 | 详细请参见EnableAlertBeforeBackPageOptions。 | 284 285**示例：** 286 287```js 288export default { 289 enableAlertBeforeBackPage() { 290 router.enableAlertBeforeBackPage({ 291 message: 'Message Info', 292 success: function() { 293 console.log('success'); 294 }, 295 cancel: function() { 296 console.log('cancel'); 297 }, 298 }); 299 } 300} 301``` 302 303## router.disableAlertBeforeBackPage<sup>6+</sup> 304 305disableAlertBeforeBackPage(options?: DisableAlertBeforeBackPageOptions): void 306 307禁用页面返回询问对话框。 308 309**系统能力：** SystemCapability.ArkUI.ArkUI.Full 310 311**参数：** 312 313| 参数名 | 类型 | 必填 | 说明 | 314| ------- | ---------------------------------------- | ---- | --------------------------------------- | 315| options | [DisableAlertBeforeBackPageOptions](#disablealertbeforebackpageoptions6) | 否 | 详细请参见DisableAlertBeforeBackPageOptions。 | 316 317**示例：** 318 319```js 320export default { 321 disableAlertBeforeBackPage() { 322 router.disableAlertBeforeBackPage({ 323 success: function() { 324 console.log('success'); 325 }, 326 cancel: function() { 327 console.log('cancel'); 328 }, 329 }); 330 } 331} 332``` 333 334## RouterOptions 335 336定义路由器的选项。 337 338**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Lite 339 340| 名称 | 参数类型 | 必填 | 说明 | 341| ------ | ------ | ---- | ---------------------------------------- | 342| uri | string | 是 | 目标页面的uri，可以是以下的两种格式：<br/>1. 页面的绝对路径，由config.json文件中的页面列表提供。例如：<br/>- pages/index/index<br/> -pages/detail/detail<br/>2. 特定路径。如果URI为斜杠（/），则显示主页。 | 343| params | Object | 否 | 跳转时要同时传递到目标页面的数据，跳转到目标页面后，参数可以在页面中直接使用，如this.data1(data1为跳转时params参数中的key值)。如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 | 344 345 346## BackRouterOptions 347 348定义路由器返回的选项。 349 350**系统能力：** 以下各项对应的系统能力有所不同，详见下表。 351 352| 名称 | 参数类型 | 必填 | 说明 | 353| ------ | ------ | ---- | ---------------------------------------- | 354| uri | string | 否 | 返回到指定uri的界面，如果页面栈上没有uri页面，则不响应该情况。如果uri未设置，则返回上一页。 <br>**系统能力：** SystemCapability.ArkUI.ArkUI.Full | 355| params | Object | 否 | 跳转时要同时传递到目标页面的数据。 <br>**系统能力：** SystemCapability.ArkUI.ArkUI.Lite | 356 357## RouterState 358 359定义路由器的状态。 360 361**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full 362 363| 名称 | 参数类型 | 必填 | 说明 | 364| ----- | ------ | ---- | ---------------------------------- | 365| index | number | 是 | 表示当前页面在页面栈中的索引。从栈底到栈顶，index从1开始递增。 | 366| name | string | 是 | 表示当前页面的名称，即对应文件名。 | 367| path | string | 是 | 表示当前页面的路径。 | 368 369## EnableAlertBeforeBackPageOptions<sup>6+</sup> 370 371定义EnableAlertBeforeBackPage选项。 372 373**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full 374 375| 名称 | 参数类型 | 必填 | 说明 | 376| -------- | ------------------------ | ---- | ------------------------- | 377| message | string | 是 | 询问对话框内容。 | 378| success | (errMsg: string) => void | 否 | 用户选择对话框确认按钮时触发，errMsg表示返回信息。 | 379| cancel | (errMsg: string) => void | 否 | 用户选择对话框取消按钮时触发，errMsg表示返回信息。 | 380| complete | () => void | 否 | 接口调用结束的回调函数。 | 381 382## DisableAlertBeforeBackPageOptions<sup>6+</sup> 383 384定义DisableAlertBeforeBackPage参数选项。 385 386**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full 387 388| 名称 | 参数类型 | 必填 | 说明 | 389| -------- | ------------------------ | ---- | ------------------------- | 390| success | (errMsg: string) => void | 否 | 关闭询问对话框能力成功时触发，errMsg表示返回信息。 | 391| cancel | (errMsg: string) => void | 否 | 关闭询问对话框能力失败时触发，errMsg表示返回信息。 | 392| complete | () => void | 否 | 接口调用结束的回调函数。 | 393 394## ParamsInterface 395 396| 名称 | 参数类型 | 说明 | 397| ------------- | ------ | ------- | 398| [key: string] | Object | 路由参数列表。 | 399
