ion-router

路由器是一個用於處理原生和 Stencil JavaScript 專案內部路由的元件。

注意

注意：這個元件只應該與原生和 Stencil JavaScript 專案一起使用。請參閱 Angular、React 和 Vue 的路由指南，以取得特定框架的路由解決方案。

應用程式在程式碼庫中應該只有一個 ion-router 元件。這個元件會控制與瀏覽器歷史記錄的所有互動，並且透過事件系統匯總更新。

ion-router 只是 ionic 的導覽出口 (ion-nav、ion-tabs 和 ion-router-outlet) 的 URL 協調器。

這表示 ion-router 永遠不會接觸 DOM，它不會顯示元件或發出任何類型的生命週期事件，它只會根據瀏覽器的 URL 告訴 ion-nav、ion-tabs 和 ion-router-outlet 何時以及要「顯示」什麼。

為了設定元件（載入/選取）和 URL 之間的這種關係，ion-router 使用宣告式語法，並使用 JSX/HTML 來定義路由樹狀結構。

基本用法

介面

RouterEventDetail

interface RouterEventDetail {
  from: string | null;
  redirectedFrom: string | null;
  to: string;
}

RouterCustomEvent

雖然不是必需的，但這個介面可以用來取代 CustomEvent 介面，以便更嚴格地使用從這個元件發出的 Ionic 事件類型。

interface RouterCustomEvent extends CustomEvent {
  detail: RouterEventDetail;
  target: HTMLIonRouterElement;
}

用法

<ion-router>
  <ion-route component="page-tabs">
    <ion-route url="/schedule" component="tab-schedule">
      <ion-route component="page-schedule"></ion-route>
      <ion-route url="/session/:sessionId" component="page-session"></ion-route>
    </ion-route>

    <ion-route url="/speakers" component="tab-speaker">
      <ion-route component="page-speaker-list"></ion-route>
      <ion-route url="/session/:sessionId" component="page-session"></ion-route>
      <ion-route url="/:speakerId" component="page-speaker-detail"></ion-route>
    </ion-route>

    <ion-route url="/map" component="page-map"></ion-route>
    <ion-route url="/about" component="page-about"></ion-route>
  </ion-route>

  <ion-route url="/tutorial" component="page-tutorial"></ion-route>
  <ion-route url="/login" component="page-login"></ion-route>
  <ion-route url="/account" component="page-account"></ion-route>
  <ion-route url="/signup" component="page-signup"></ion-route>
  <ion-route url="/support" component="page-support"></ion-route>
</ion-router>

屬性

root

描述	在比對 URL 時要使用的根路徑。預設情況下，這個值設定為 "/"，但您可以為所有 URL 路徑指定替代字首。
屬性	root
類型	字串
預設值	'/'

useHash

描述	路由器可以在兩種「模式」下運作： - 使用雜湊：/index.html#/path/to/page - 不使用雜湊：/path/to/page 使用哪一種可能會取決於您的應用程式需求和/或部署位置。 通常「無雜湊」導覽對於 SEO 效果更好，而且也更方便使用者使用，但是可能需要額外的伺服器端設定才能正常運作。 另一方面，雜湊導覽更容易部署，甚至可以在檔案通訊協定上運作。 預設情況下，這個屬性為 true，將其變更為 false 以允許無雜湊 URL。
屬性	use-hash
類型	布林值
預設值	true

事件

名稱	描述	冒泡
ionRouteDidChange	當路由變更時發出	true
ionRouteWillChange	當路由即將變更時發出的事件	true

方法

back

描述	返回視窗歷史記錄中的上一個頁面。
簽名	back() => Promise<void>

push

描述	導覽至指定的路徑。
簽名	push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>

CSS Shadow Parts

這個元件沒有可用的 CSS shadow parts。

CSS 自訂屬性

這個元件沒有可用的 CSS 自訂屬性。

插槽

這個元件沒有可用的插槽。