頁面路由（router）

頁面跳轉(zhuǎn)

頁面跳轉(zhuǎn)是開發(fā)過程中的一個(gè)重要組成部分。在使用應(yīng)用程序時(shí)，通常需要在不同的頁面之間跳轉(zhuǎn)，有時(shí)還需要將數(shù)據(jù)從一個(gè)頁面?zhèn)鬟f到另一個(gè)頁面。

圖1 頁面跳轉(zhuǎn)

Router模塊提供了兩種跳轉(zhuǎn)模式，分別是router.pushUrl()和router.replaceUrl()。這兩種模式?jīng)Q定了目標(biāo)頁是否會替換當(dāng)前頁。

• router.pushUrl()：目標(biāo)頁不會替換當(dāng)前頁，而是壓入頁面棧。這樣可以保留當(dāng)前頁的狀態(tài)，并且可以通過返回鍵或者調(diào)用router.back()方法返回到當(dāng)前頁。
• router.replaceUrl()：目標(biāo)頁會替換當(dāng)前頁，并銷毀當(dāng)前頁。這樣可以釋放當(dāng)前頁的資源，并且無法返回到當(dāng)前頁。

同時(shí)，Router模塊提供了兩種實(shí)例模式，分別是Standard和Single。這兩種模式?jīng)Q定了目標(biāo)url是否會對應(yīng)多個(gè)實(shí)例。

• Standard：標(biāo)準(zhǔn)實(shí)例模式，也是默認(rèn)情況下的實(shí)例模式。每次調(diào)用該方法都會新建一個(gè)目標(biāo)頁，并壓入棧頂。

• Single：單實(shí)例模式。即如果目標(biāo)頁的url在頁面棧中已經(jīng)存在同url頁面，則離棧頂最近的同url頁面會被移動到棧頂，并重新加載；如果目標(biāo)頁的url在頁面棧中不存在同url頁面，則按照標(biāo)準(zhǔn)模式跳轉(zhuǎn)。

在使用頁面路由Router相關(guān)功能之前，需要在代碼中先導(dǎo)入Router模塊。

import router from '@ohos.router';

• 場景一：有一個(gè)主頁（Home）和一個(gè)詳情頁（Detail），希望從主頁點(diǎn)擊一個(gè)商品，跳轉(zhuǎn)到詳情頁。同時(shí)，需要保留主頁在頁面棧中，以便返回時(shí)恢復(fù)狀態(tài)。這種場景下，可以使用pushUrl()方法，并且使用Standard實(shí)例模式（或者省略）。

  // 在Home頁面中
  function onJumpClick(): void {
    router.pushUrl({
      url: 'pages/Detail' // 目標(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.');
    });
  }

  說明

  標(biāo)準(zhǔn)實(shí)例模式下，router.RouterMode.Standard參數(shù)可以省略。

• 場景二：有一個(gè)登錄頁（Login）和一個(gè)個(gè)人中心頁（Profile），希望從登錄頁成功登錄后，跳轉(zhuǎn)到個(gè)人中心頁。同時(shí)，銷毀登錄頁，在返回時(shí)直接退出應(yīng)用。這種場景下，可以使用replaceUrl()方法，并且使用Standard實(shí)例模式（或者省略）。

  // 在Login頁面中
  function onJumpClick(): void {
    router.replaceUrl({
      url: 'pages/Profile' // 目標(biāo)url
    }, router.RouterMode.Standard, (err) => {
      if (err) {
        console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
        return;
      }
      console.info('Invoke replaceUrl succeeded.');
    })
  }

  說明

  標(biāo)準(zhǔn)實(shí)例模式下，router.RouterMode.Standard參數(shù)可以省略。

• 場景三：有一個(gè)設(shè)置頁（Setting）和一個(gè)主題切換頁（Theme），希望從設(shè)置頁點(diǎn)擊主題選項(xiàng)，跳轉(zhuǎn)到主題切換頁。同時(shí)，需要保證每次只有一個(gè)主題切換頁存在于頁面棧中，在返回時(shí)直接回到設(shè)置頁。這種場景下，可以使用pushUrl()方法，并且使用Single實(shí)例模式。

  // 在Setting頁面中
  function onJumpClick(): void {
    router.pushUrl({
      url: 'pages/Theme' // 目標(biāo)url
    }, router.RouterMode.Single, (err) => {
      if (err) {
        console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
        return;
      }
      console.info('Invoke pushUrl succeeded.');
    });
  }

• 場景四：有一個(gè)搜索結(jié)果列表頁（SearchResult）和一個(gè)搜索結(jié)果詳情頁（SearchDetail），希望從搜索結(jié)果列表頁點(diǎn)擊某一項(xiàng)結(jié)果，跳轉(zhuǎn)到搜索結(jié)果詳情頁。同時(shí)，如果該結(jié)果已經(jīng)被查看過，則不需要再新建一個(gè)詳情頁，而是直接跳轉(zhuǎn)到已經(jīng)存在的詳情頁。這種場景下，可以使用replaceUrl()方法，并且使用Single實(shí)例模式。

  // 在SearchResult頁面中
  function onJumpClick(): void {
    router.replaceUrl({
      url: 'pages/SearchDetail' // 目標(biāo)url
    }, router.RouterMode.Single, (err) => {
      if (err) {
        console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
        return;
      }
      console.info('Invoke replaceUrl succeeded.');})
  }

以上是不帶參數(shù)傳遞的場景。

如果需要在跳轉(zhuǎn)時(shí)傳遞一些數(shù)據(jù)給目標(biāo)頁，則可以在調(diào)用Router模塊的方法時(shí)，添加一個(gè)params屬性，并指定一個(gè)對象作為參數(shù)。例如：

class DataModelInfo {
  age: number;
}

class DataModel {
  id: number;
  info: DataModelInfo;
}

function onJumpClick(): void {
  // 在Home頁面中
  let paramsInfo: DataModel = {
    id: 123,
    info: {
      age: 20
    }
  };

  router.pushUrl({
    url: 'pages/Detail', // 目標(biāo)url
    params: paramsInfo // 添加params屬性，傳遞自定義參數(shù)
  }, (err) => {
    if (err) {
      console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke pushUrl succeeded.');
  })
}

在目標(biāo)頁中，可以通過調(diào)用Router模塊的getParams()方法來獲取傳遞過來的參數(shù)。例如：

const params = router.getParams(); // 獲取傳遞過來的參數(shù)對象
const id = params['id']; // 獲取id屬性的值
const age = params['info'].age; // 獲取age屬性的值

頁面返回

當(dāng)用戶在一個(gè)頁面完成操作后，通常需要返回到上一個(gè)頁面或者指定頁面，這就需要用到頁面返回功能。在返回的過程中，可能需要將數(shù)據(jù)傳遞給目標(biāo)頁，這就需要用到數(shù)據(jù)傳遞功能。

圖2 頁面返回

在使用頁面路由Router相關(guān)功能之前，需要在代碼中先導(dǎo)入Router模塊。

import router from '@ohos.router';

可以使用以下幾種方式進(jìn)行頁面返回：

• 方式一：返回到上一個(gè)頁面。

  router.back();

  這種方式會返回到上一個(gè)頁面，即上一個(gè)頁面在頁面棧中的位置。但是，上一個(gè)頁面必須存在于頁面棧中才能夠返回，否則該方法將無效。

• 方式二：返回到指定頁面。

  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屬性的值
}

頁面返回前增加一個(gè)詢問框

在開發(fā)應(yīng)用時(shí)，為了避免用戶誤操作或者丟失數(shù)據(jù)，有時(shí)候需要在用戶從一個(gè)頁面返回到另一個(gè)頁面之前，彈出一個(gè)詢問框，讓用戶確認(rèn)是否要執(zhí)行這個(gè)操作。

本文將從系統(tǒng)默認(rèn)詢問框和自定義詢問框兩個(gè)方面來介紹如何實(shí)現(xiàn)頁面返回前增加一個(gè)詢問框的功能。

圖3 頁面返回前增加一個(gè)詢問框

系統(tǒng)默認(rèn)詢問框

為了實(shí)現(xiàn)這個(gè)功能，可以使用頁面路由Router模塊提供的兩個(gè)方法：router.showAlertBeforeBackPage()和router.back()來實(shí)現(xiàn)這個(gè)功能。

在使用頁面路由Router相關(guān)功能之前，需要在代碼中先導(dǎo)入Router模塊。

import router from '@ohos.router';

如果想要在目標(biāo)界面開啟頁面返回詢問框，需要在調(diào)用router.back()方法之前，通過調(diào)用router.showAlertBeforeBackPage()方法設(shè)置返回詢問框的信息。例如，在支付頁面中定義一個(gè)返回按鈕的點(diǎn)擊事件處理函數(shù)：

// 定義一個(gè)返回按鈕的點(diǎn)擊事件處理函數(shù)
function onBackClick(): void {
  // 調(diào)用router.showAlertBeforeBackPage()方法，設(shè)置返回詢問框的信息
  try {
    router.showAlertBeforeBackPage({
      message: '您還沒有完成支付，確定要返回嗎？' // 設(shè)置詢問框的內(nèi)容
    });
  } catch (err) {
    console.error(`Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}`);
  }

  // 調(diào)用router.back()方法，返回上一個(gè)頁面
  router.back();
}

其中，router.showAlertBeforeBackPage()方法接收一個(gè)對象作為參數(shù)，該對象包含以下屬性：

• message：string類型，表示詢問框的內(nèi)容。

  如果調(diào)用成功，則會在目標(biāo)界面開啟頁面返回詢問框；如果調(diào)用失敗，則會拋出異常，并通過err.code和err.message獲取錯(cuò)誤碼和錯(cuò)誤信息。

  當(dāng)用戶點(diǎn)擊“返回”按鈕時(shí)，會彈出確認(rèn)對話框，詢問用戶是否確認(rèn)返回。選擇“取消”將停留在當(dāng)前頁目標(biāo)頁；選擇“確認(rèn)”將觸發(fā)router.back()方法，并根據(jù)參數(shù)決定如何執(zhí)行跳轉(zhuǎn)。

自定義詢問框

自定義詢問框的方式，可以使用彈窗或者自定義彈窗實(shí)現(xiàn)。這樣可以讓應(yīng)用界面與系統(tǒng)默認(rèn)詢問框有所區(qū)別，提高應(yīng)用的用戶體驗(yàn)度。本文以彈窗為例，介紹如何實(shí)現(xiàn)自定義詢問框。

在使用頁面路由Router相關(guān)功能之前，需要在代碼中先導(dǎo)入Router模塊。

import router from '@ohos.router';

在事件回調(diào)中，調(diào)用彈窗的promptAction.showDialog()方法：

function onBackClick() {
  // 彈出自定義的詢問框
  promptAction.showDialog({
    message: '您還沒有完成支付，確定要返回嗎？',
    buttons: [
      {
        text: '取消',
        color: '#FF0000'
      },
      {
        text: '確認(rèn)',
        color: '#0099FF'
      }
    ]
  }).then((result) => {
    if (result.index === 0) {
      // 用戶點(diǎn)擊了“取消”按鈕
      console.info('User canceled the operation.');
    } else if (result.index === 1) {
      // 用戶點(diǎn)擊了“確認(rèn)”按鈕
      console.info('User confirmed the operation.');
      // 調(diào)用router.back()方法，返回上一個(gè)頁面
      router.back();
    }
  }).catch((err) => {
    console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`);
  })
}

當(dāng)用戶點(diǎn)擊“返回”按鈕時(shí)，會彈出自定義的詢問框，詢問用戶是否確認(rèn)返回。選擇“取消”將停留在當(dāng)前頁目標(biāo)頁；選擇“確認(rèn)”將觸發(fā)router.back()方法，并根據(jù)參數(shù)決定如何執(zhí)行跳轉(zhuǎn)。