頁面路由指在應(yīng)用程序中實(shí)現(xiàn)不同頁面之間的跳轉(zhuǎn)和數(shù)據(jù)傳遞。HarmonyOS提供了Router模塊，通過不同的url地址差购，可以方便地進(jìn)行頁面路由，輕松地訪問不同的頁面汉嗽。
頁面跳轉(zhuǎn)
頁面跳轉(zhuǎn)是開發(fā)過程中的一個(gè)重要組成部分欲逃。在使用應(yīng)用程序時(shí)，通常需要在不同的頁面之間跳轉(zhuǎn)饼暑，有時(shí)還需要將數(shù)據(jù)從一個(gè)頁面?zhèn)鬟f到另一個(gè)頁面稳析。
兩種跳轉(zhuǎn)模式
Router模塊提供了兩種跳轉(zhuǎn)模式，分別是router.pushUrl()和router.replaceUrl()弓叛。這兩種模式?jīng)Q定了目標(biāo)頁是否會(huì)替換當(dāng)前頁彰居。
router.pushUrl()：目標(biāo)頁不會(huì)替換當(dāng)前頁，而是壓入頁面棧撰筷。這樣可以保留當(dāng)前頁的狀態(tài)陈惰，并且可以通過返回鍵或者調(diào)用router.back()方法返回到當(dāng)前頁。
router.replaceUrl()：目標(biāo)頁會(huì)替換當(dāng)前頁毕籽，并銷毀當(dāng)前頁抬闯。這樣可以釋放當(dāng)前頁的資源，并且無法返回到當(dāng)前頁关筒。
兩種實(shí)例模式
同時(shí)溶握，Router模塊提供了兩種實(shí)例模式，分別是Standard和Single平委。這兩種模式?jīng)Q定了目標(biāo)url是否會(huì)對應(yīng)多個(gè)實(shí)例奈虾。
Standard：標(biāo)準(zhǔn)實(shí)例模式，也是默認(rèn)情況下的實(shí)例模式廉赔。每次調(diào)用該方法都會(huì)新建一個(gè)目標(biāo)頁，并壓入棧頂匾鸥。
Single：單實(shí)例模式蜡塌。即如果目標(biāo)頁的url在頁面棧中已經(jīng)存在同url頁面，則離棧頂最近的同url頁面會(huì)被移動(dòng)到棧頂勿负，并重新加載馏艾；如果目標(biāo)頁的url在頁面棧中不存在同url頁面劳曹，則按照標(biāo)準(zhǔn)模式跳轉(zhuǎn)。
帶參傳遞
如果需要在跳轉(zhuǎn)時(shí)傳遞一些數(shù)據(jù)給目標(biāo)頁琅摩，則可以在調(diào)用Router模塊的方法時(shí)铁孵，添加一個(gè)params屬性，并指定一個(gè)對象作為參數(shù)房资。在目標(biāo)頁中蜕劝，可以通過調(diào)用Router模塊的getParams()方法來獲取傳遞過來的參數(shù)。
前期準(zhǔn)備
在使用頁面路由Router相關(guān)功能之前轰异，需要在代碼中先導(dǎo)入Router模塊岖沛。
import?router from?'@ohos.router';
頁面返回
當(dāng)用戶在一個(gè)頁面完成操作后，通常需要返回到上一個(gè)頁面或者指定頁面搭独，這就需要用到頁面返回功能婴削。在返回的過程中，可能需要將數(shù)據(jù)傳遞給目標(biāo)頁牙肝，這就需要用到數(shù)據(jù)傳遞功能唉俗。
返回到上一個(gè)頁面
router.back();
返回到指定頁面
router.back({
??url:?'pages/Home'
});
這種方式可以返回到指定頁面，需要指定目標(biāo)頁的路徑配椭。目標(biāo)頁必須存在于頁面棧中才能夠返回虫溜。
返回到指定頁面，并傳遞自定義參數(shù)信息
router.back({
??url:?'pages/Home',
??params: {
????info:?'來自Home頁'
??}
});
這種方式不僅可以返回到指定頁面颂郎，還可以在返回的同時(shí)傳遞自定義參數(shù)信息吼渡。這些參數(shù)信息可以在目標(biāo)頁中通過調(diào)用router.getParams()方法進(jìn)行獲取和解析。
在目標(biāo)頁中乓序，在需要獲取參數(shù)的位置調(diào)用router.getParams()方法即可寺酪，例如在onPageShow()生命周期回調(diào)中：
onPageShow() {
??const?params = router.getParams();?// 獲取傳遞過來的參數(shù)對象
??const?info = params['info'];?// 獲取info屬性的值
}
示例
import?router from?'@ohos.router';
import?{ DataModel } from?'../model/DataModelInfo'
let paramsInfo: DataModel = {
??id:?123,
??info: {
????index:?'Index頁面'
??}
};
@Entry
@Component
struct Index {
??@State?message: string =?'Hello World'
??build() {
????Row() {
??????Column() {
????????Button("跳轉(zhuǎn)到IndexTestA界面").onClick(_ => {
??????????router.pushUrl({
????????????url:?'pages/IndexTestA'?// 目標(biāo)url
??????????}, router.RouterMode.Standard, (err) => {
????????????if?(err) {
??????????????console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
??????????????return;
????????????}
????????????console.info('Invoke pushUrl succeeded.');
??????????});
????????}).margin({ bottom:?10?})
????????Button("跳轉(zhuǎn)到IndexTestA界面并傳遞數(shù)據(jù)").onClick(_ => {
??????????router.pushUrl({
????????????url:?'pages/IndexTestA',?// 目標(biāo)url
????????????params: paramsInfo
??????????}, router.RouterMode.Standard, (err) => {
????????????if?(err) {
??????????????console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
??????????????return;
????????????}
????????????console.info('Invoke pushUrl succeeded.');
??????????});
????????}).margin({ bottom:?10?})
????????Button("跳轉(zhuǎn)到IndexTestA并替換當(dāng)前界面").onClick(_ => {
??????????router.replaceUrl({
????????????url:?'pages/IndexTestA'?// 目標(biāo)url
??????????}, router.RouterMode.Standard, (err) => {
????????????if?(err) {
??????????????console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
??????????????return;
????????????}
????????????console.info('Invoke pushUrl succeeded.');
??????????});
????????}).margin({ bottom:?10?})
????????Button("跳轉(zhuǎn)到IndexTestB界面").onClick(_ => {
??????????router.pushUrl({
????????????url:?'pages/IndexTestB'?// 目標(biāo)url
??????????}, router.RouterMode.Standard, (err) => {
????????????if?(err) {
??????????????console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
??????????????return;
????????????}
????????????console.info('Invoke pushUrl succeeded.');
??????????});
????????}).margin({ bottom:?10?})
????????Button("跳轉(zhuǎn)到IndexTestB并替換當(dāng)前界面").onClick(_ => {
??????????router.replaceUrl({
????????????url:?'pages/IndexTestB'?// 目標(biāo)url
??????????}, router.RouterMode.Standard, (err) => {
????????????if?(err) {
??????????????console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
??????????????return;
????????????}
????????????console.info('Invoke pushUrl succeeded.');
??????????});
????????})
??????}
??????.width('100%')
????}
????.height('100%')
??}
}
import?router from?'@ohos.router';
@Entry
@Component
struct IndexTestA {
??@State?message: string =?'Hello World'
??@State?sourceData: string =?''
??build() {
????Row() {
??????Column() {
????????if?(this.sourceData !=?'') {
??????????Text(`來自${this.sourceData}的數(shù)據(jù)`)
????????}
????????Text("IndexTestA").fontSize(20).margin({ bottom:?10?})
????????Button("返回按鈕").onClick(_ => {
??????????router.back()
????????}).margin({ bottom:?10?})
????????Button("跳轉(zhuǎn)到Index").onClick(_ => {
??????????router.pushUrl({ url:?'pages/Index'?})
????????}).margin({ bottom:?10?})
????????Button("Single方式跳轉(zhuǎn)到Index").onClick(_ => {
??????????router.pushUrl({ url:?'pages/Index'?}, router.RouterMode.Single)
????????}).margin({ bottom:?10?})
??????}.padding(20)
??????.width('100%')
????}
????.height('100%')
??}
??onPageShow() {
????const?params = router.getParams();?// 獲取傳遞過來的參數(shù)對象
????if?(params==null) {
??????return
????}
????if?(params['info']!=null) {
??????console.log('info',"params"+params['id'])
??????console.log('info',"params['info'].index"+params['info'].index)
??????this.sourceData = params['info'].index;?// 獲取info屬性的值
????}
??}
}
import?router from?'@ohos.router';
import?{ DataModel } from?'../model/DataModelInfo'
let paramsInfo: DataModel = {
??id:?123,
??info: {
????index:?'IndexTestB頁面'
??}
};
@Entry
@Component
struct IndexTestB {
??@State?message: string =?'Hello World'
??build() {
????Row() {
??????Column() {
????????Text("IndexTestB").fontSize(20).margin({ bottom:?10?})
????????Button("返回按鈕").onClick(_ => {
??????????router.back()
????????}).margin({ bottom:?10?})
????????Button("返回到指定IndexTestA按鈕").onClick(_ => {
??????????router.back({ url:?'pages/IndexTestA'?})
????????}).margin({ bottom:?10?})
????????Button("返回到指定IndexTestA并攜帶參數(shù)").onClick(_ => {
??????????router.back({ url:?'pages/IndexTestA', params: paramsInfo });
????????}).margin({ bottom:?10?})
????????Button("跳轉(zhuǎn)到Index").onClick(_ => {
??????????router.pushUrl({ url:?'pages/Index'?})
????????}).margin({ bottom:?10?})
????????Button("Single方式跳轉(zhuǎn)到Index").onClick(_ => {
??????????router.pushUrl({ url:?'pages/Index'?}, router.RouterMode.Single)
????????}).margin({ bottom:?10?})
??????}.padding(20)
??????.width('100%')
????}
????.height('100%')
??}
}
