頁(yè)面路由
說(shuō)明
開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
導(dǎo)入模塊
import router from '@ohos.router'
權(quán)限列表
無(wú)
router.push
push(options: RouterOptions): void
跳轉(zhuǎn)到應(yīng)用內(nèi)的指定頁(yè)面。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
參數(shù)名 | 類(lèi)型 | 必填 | 說(shuō)明 |
---|---|---|---|
options | [RouterOptions] | 是 | 跳轉(zhuǎn)頁(yè)面描述信息。 |
示例:
// 在當(dāng)前頁(yè)面中
export default {
pushPage() {
router.push({
url: 'pages/routerpage2/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
});
}
}
// 在routerpage2頁(yè)面中
export default {
data: {
data1: 'default',
data2: {
data3: [1, 2, 3]
}
},
onInit() {
console.info('showData1:' + this.data1);
console.info('showData3:' + this.data2.data3);
}
}
router.replace
replace(options: RouterOptions): void
用應(yīng)用內(nèi)的某個(gè)頁(yè)面替換當(dāng)前頁(yè)面,并銷(xiāo)毀被替換的頁(yè)面。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
參數(shù):
參數(shù)名 | 類(lèi)型 | 必填 | 說(shuō)明 |
---|---|---|---|
options | [RouterOptions] | 是 | 替換頁(yè)面描述信息。 |
示例:
// 在當(dāng)前頁(yè)面中
export default {
replacePage() {
router.replace({
url: 'pages/detail/detail',
params: {
data1: 'message',
},
});
}
}
// 在detail頁(yè)面中
export default {
data: {
data1: 'default'
},
onInit() {
console.info('showData1:' + this.data1)
}
}
router.back
back(options?: RouterOptions ): void
返回上一頁(yè)面或指定的頁(yè)面。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
參數(shù):
參數(shù)名 | 類(lèi)型 | 必填 | 說(shuō)明 |
---|---|---|---|
options | [RouterOptions] | 是 | 返回頁(yè)面描述信息,其中參數(shù)url指路由跳轉(zhuǎn)時(shí)會(huì)返回到指定url的界面,如果頁(yè)面棧上沒(méi)有url頁(yè)面,則不響應(yīng)該情況。如果url未設(shè)置,則返回上一頁(yè)。 |
示例:
// index頁(yè)面
export default {
indexPushPage() {
router.push({
url: 'pages/detail/detail',
});
}
}
// detail頁(yè)面
export default {
detailPushPage() {
router.push({
url: 'pages/mall/mall',
});
}
}
// mall頁(yè)面通過(guò)back,將返回detail頁(yè)面
export default {
mallBackPage() {
router.back();
}
}
// detail頁(yè)面通過(guò)back,將返回index頁(yè)面
export default {
defaultBack() {
router.back();
}
}
// 通過(guò)back,返回到detail頁(yè)面
export default {
backToDetail() {
router.back({uri:'pages/detail/detail'});
}
}
router.clear
clear(): void
清空頁(yè)面棧中的所有歷史頁(yè)面,僅保留當(dāng)前頁(yè)面作為棧頂頁(yè)面。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
示例:
export default {
clearPage() {
router.clear();
}
}js
router.getLength
getLength(): string
獲取當(dāng)前在頁(yè)面棧內(nèi)的頁(yè)面數(shù)量。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
返回值:
類(lèi)型 | 說(shuō)明 |
---|---|
string | 頁(yè)面數(shù)量,頁(yè)面棧支持最大數(shù)值是32。 |
示例:
export default {
getLength() {
var size = router.getLength();
console.log('pages stack size = ' + size);
}
}
router.getState
getState(): RouterState
獲取當(dāng)前頁(yè)面的狀態(tài)信息。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
返回值:
類(lèi)型 | 說(shuō)明 |
---|---|
[RouterState] | 頁(yè)面狀態(tài)信息。 |
RouterState
頁(yè)面狀態(tài)信息。
系統(tǒng)能力: 以下各項(xiàng)對(duì)應(yīng)的系統(tǒng)能力均為SystemCapability.ArkUI.ArkUI.Full。
名稱(chēng) | 類(lèi)型 | 說(shuō)明 |
---|---|---|
index | number | 表示當(dāng)前頁(yè)面在頁(yè)面棧中的索引。 > ![icon-note.gif]說(shuō)明:> 從棧底到棧頂,index從1開(kāi)始遞增。 |
name | string | 表示當(dāng)前頁(yè)面的名稱(chēng),即對(duì)應(yīng)文件名。 |
path | string | 表示當(dāng)前頁(yè)面的路徑。 |
示例:
export default {
getState() {
var page = router.getState();
console.log('current index = ' + page.index);
console.log('current name = ' + page.name);
console.log('current path = ' + page.path);
}
}
router.enableAlertBeforeBackPage
enableAlertBeforeBackPage(options: EnableAlertOptions): void
開(kāi)啟頁(yè)面返回詢(xún)問(wèn)對(duì)話框。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
參數(shù):
參數(shù)名 | 類(lèi)型 | 必填 | 說(shuō)明 |
---|---|---|---|
options | [EnableAlertOptions] | 是 | 文本彈窗信息描述。 |
示例:
export default {
enableAlertBeforeBackPage() {
router.enableAlertBeforeBackPage({
message: 'Message Info',
success: function() {
console.log('success');
},
fail: function() {
console.log('fail');
},
});
}
}
EnableAlertOptions
頁(yè)面返回詢(xún)問(wèn)對(duì)話框選項(xiàng)。
系統(tǒng)能力: 以下各項(xiàng)對(duì)應(yīng)的系統(tǒng)能力均為SystemCapability.ArkUI.ArkUI.Full。
名稱(chēng) | 類(lèi)型 | 必填 | 說(shuō)明 |
---|---|---|---|
message | string | 是 | 詢(xún)問(wèn)對(duì)話框內(nèi)容。 |
router.disableAlertBeforeBackPage
disableAlertBeforeBackPage(): void
禁用頁(yè)面返回詢(xún)問(wèn)對(duì)話框。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
示例:
export default {
disableAlertBeforeBackPage() {
router.disableAlertBeforeBackPage();
}
}
router.getParams
getParams(): Object
獲取發(fā)起跳轉(zhuǎn)的頁(yè)面往當(dāng)前頁(yè)傳入的參數(shù)。
系統(tǒng)能力: SystemCapability.ArkUI.ArkUI.Full
返回值:
類(lèi)型 | 說(shuō)明 |
---|---|
Object | 發(fā)起跳轉(zhuǎn)的頁(yè)面往當(dāng)前頁(yè)傳入的參數(shù)。 |
示例:
類(lèi)Web范示例
// 在當(dāng)前頁(yè)面中 export default { pushPage() { router.push({ url: 'pages/detail/detail', params: { data1: 'message', }, }); } }
// 在detail頁(yè)面中 export default { onInit() { console.info('showData1:' + router.getParams().data1); } }
聲明式示例
//通過(guò)router.push跳轉(zhuǎn)至目標(biāo)頁(yè)攜帶params參數(shù) import router from '@ohos.router' @Entry @Component struct Index { async routePage() { let options = { url: 'pages/second', params: { text: '這是第一頁(yè)的值', data: { array: [12, 45, 78] }, } } try { await router.push(options) } catch (err) { console.info(` fail callback, code: ${err.code}, msg: ${err.msg}`) } } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text('這是第一頁(yè)') .fontSize(50) .fontWeight(FontWeight.Bold) Button() { Text('next page') .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ top: 20 }) .backgroundColor('#ccc') .onClick(() = > { this.routePage() }) } .width('100%') .height('100%') } }
//在second頁(yè)面中接收傳遞過(guò)來(lái)的參數(shù)
import router from '@ohos.router'
@Entry
@Component
struct Second {
private content: string = "這是第二頁(yè)"
@State text: string = router.getParams()['text']
@State data: any = router.getParams()['data']
@State secondData : string = ''
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(`${this.content}`)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.text)
.fontSize(30)
.onClick(()= >{
this.secondData = (this.data.array[1]).toString()
})
.margin({top:20})
Text('第一頁(yè)傳來(lái)的數(shù)值' + ' ' + this.secondData)
.fontSize(20)
.margin({top:20})
.backgroundColor('red')
}
.width('100%')
.height('100%')
}
}
`HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿`
RouterOptions
路由跳轉(zhuǎn)選項(xiàng)。
系統(tǒng)能力: 以下各項(xiàng)對(duì)應(yīng)的系統(tǒng)能力均為SystemCapability.ArkUI.ArkUI.Lite。
名稱(chēng) | 類(lèi)型 | 必填 | 說(shuō)明 |
---|---|---|---|
url | string | 是 | 表示目標(biāo)頁(yè)面的uri,可以用以下兩種格式: - 頁(yè)面絕對(duì)路徑,由配置文件中pages列表提供,例如: - pages/index/index - pages/detail/detail - 特殊值,如果uri的值是"/",則跳轉(zhuǎn)到首頁(yè)。 |
params | Object | 否 | 跳轉(zhuǎn)時(shí)要同時(shí)傳遞到目標(biāo)頁(yè)面的數(shù)據(jù),跳轉(zhuǎn)到目標(biāo)頁(yè)面后,參數(shù)可以在頁(yè)面中直接使用,如this.data1(data1為跳轉(zhuǎn)時(shí)params參數(shù)中的key值)。如果目標(biāo)頁(yè)面中已有該字段,則其值會(huì)被傳入的字段值覆蓋。 |
說(shuō)明: 頁(yè)面路由棧支持的最大Page數(shù)量為32。
審核編輯 黃宇
-
接口
+關(guān)注
關(guān)注
33文章
8580瀏覽量
151049 -
鴻蒙
+關(guān)注
關(guān)注
57文章
2345瀏覽量
42825
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論