版本：v8

ion-route

當瀏覽器 URL 與 url 屬性匹配時，路由元件會取得元件並呈現它。

注意

注意：此元件僅應與原生和 Stencil JavaScript 專案一起使用。對於 Angular 專案，請使用 ion-router-outlet 和 Angular 路由器。

導覽鉤子可用於執行任務或充當導覽保護。鉤子透過將函式提供給每個 ion-route 上的 beforeEnter 和 beforeLeave 屬性來使用。傳回 true 允許導覽繼續，而傳回 false 會導致它被取消。傳回 NavigationHookOptions 型別的物件允許您將導覽重新導向到另一個頁面。

介面

interface NavigationHookOptions {
  /**
   * A valid path to redirect navigation to.
   */
  redirect: string;
}

使用方式

Javascript
Stencil
Vue

<ion-router>
  <ion-route url="/home" component="page-home"></ion-route>
  <ion-route url="/dashboard" component="page-dashboard"></ion-route>
  <ion-route url="/new-message" component="page-new-message"></ion-route>
  <ion-route url="/login" component="page-login"></ion-route>
</ion-router>

const dashboardPage = document.querySelector('ion-route[url="/dashboard"]');
dashboardPage.beforeEnter = isLoggedInGuard;

const newMessagePage = document.querySelector('ion-route[url="/dashboard"]');
newMessagePage.beforeLeave = hasUnsavedDataGuard;

const isLoggedInGuard = async () => {
  const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation
  
  if (isLoggedIn) {
    return true;
  } else {
    return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page
  }
}

const hasUnsavedDataGuard = async () => {
  const hasUnsavedData = await checkData(); // Replace this with actual validation
  
  if (hasUnsavedData) {
    return await confirmDiscardChanges();
  } else {
    return true;
  }
}

const confirmDiscardChanges = async () => {
  const alert = document.createElement('ion-alert');
  alert.header = 'Discard Unsaved Changes?';
  alert.message = 'Are you sure you want to leave? Any unsaved changed will be lost.';
  alert.buttons = [
    {
      text: 'Cancel',
      role: 'Cancel',
    },
    {
      text: 'Discard',
      role: 'destructive',
    }
  ];
  
  document.body.appendChild(alert);
  
  await alert.present();
  
  const { role } = await alert.onDidDismiss();
  
  return (role === 'Cancel') ? false : true;
}

import { Component, h } from '@stencil/core';
import { alertController } from '@ionic/core';

@Component({
  tag: 'router-example',
  styleUrl: 'router-example.css'
})
export class RouterExample {
  render() {
    return (
      <ion-router>
        <ion-route url="/home" component="page-home"></ion-route>
        <ion-route url="/dashboard" component="page-dashboard" beforeEnter={isLoggedInGuard}></ion-route>
        <ion-route url="/new-message" component="page-new-message" beforeLeave={hasUnsavedDataGuard}></ion-route>
        <ion-route url="/login" component="page-login"></ion-route>
      </ion-router>
    )
  }
}

const isLoggedInGuard = async () => {
  const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation
  
  if (isLoggedIn) {
    return true;
  } else {
    return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page
  }
}

const hasUnsavedDataGuard = async () => {
  const hasUnsavedData = await checkData(); // Replace this with actual validation
  
  if (hasUnsavedData) {
    return await confirmDiscardChanges();
  } else {
    return true;
  }
}

const confirmDiscardChanges = async () => {
  const alert = await alertController.create({
    header: 'Discard Unsaved Changes?',
    message: 'Are you sure you want to leave? Any unsaved changed will be lost.',
    buttons: [
      {
        text: 'Cancel',
        role: 'Cancel',
      },
      {
        text: 'Discard',
        role: 'destructive',
      }
    ]
  });
  
  await alert.present();
  
  const { role } = await alert.onDidDismiss();
  
  return (role === 'Cancel') ? false : true;
}

<template>
  <ion-router>
    <ion-route url="/home" component="page-home"></ion-route>
    <ion-route url="/dashboard" component="page-dashboard" :beforeEnter="isLoggedInGuard"></ion-route>
    <ion-route url="/new-message" component="page-new-message" :beforeLeave="hasUnsavedDataGuard"></ion-route>
    <ion-route url="/login" component="page-login"></ion-route>
  </ion-router>
</template>

<script>
  import { alertController } from '@ionic/vue';

  const isLoggedInGuard = async () => {
    const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation
    
    if (isLoggedIn) {
      return true;
    } else {
      return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page
    }
  }
  
  const hasUnsavedDataGuard = async () => {
    const hasUnsavedData = await checkData(); // Replace this with actual validation
    
    if (hasUnsavedData) {
      return await confirmDiscardChanges();
    } else {
      return true;
    }
  }
  
  const confirmDiscardChanges = async () => {
    const alert = await alertController.create({
      header: 'Discard Unsaved Changes?',
      message: 'Are you sure you want to leave? Any unsaved changed will be lost.',
      buttons: [
        {
          text: 'Cancel',
          role: 'Cancel',
        },
        {
          text: 'Discard',
          role: 'destructive',
        }
      ]
    });
    
    await alert.present();
    
    const { role } = await alert.onDidDismiss();
    
    return (role === 'Cancel') ? false : true;
  }
</script>

屬性

beforeEnter

描述	當路由嘗試進入時觸發的導覽鉤子。傳回 `true` 允許導覽繼續，而傳回 `false` 會導致它被取消。傳回 `NavigationHookOptions` 物件會導致路由器重新導向到指定的路徑。
屬性	`未定義`
類型	`(() => NavigationHookResult ｜ Promise<NavigationHookResult>) ｜ undefined`
預設值	`未定義`

beforeLeave

描述	當路由嘗試離開時觸發的導覽鉤子。傳回 `true` 允許導覽繼續，而傳回 `false` 會導致它被取消。傳回 `NavigationHookOptions` 物件會導致路由器重新導向到指定的路徑。
屬性	`未定義`
類型	`(() => NavigationHookResult ｜ Promise<NavigationHookResult>) ｜ undefined`
預設值	`未定義`

component

描述	當路由匹配時，要在導覽輸出 (`ion-tabs`、`ion-nav`) 中載入/選取的元件名稱。此屬性的值不總是載入元件的標籤名稱，在 `ion-tabs` 中它實際上是指要選取的 `ion-tab` 的名稱。
屬性	`component`
類型	`字串`
預設值	`未定義`

componentProps

描述	一個鍵值 `{ 'red': true, 'blue': 'white'}`，其中包含應在呈現時傳遞給已定義元件的屬性。
屬性	`未定義`
類型	`undefined ｜ { [key: string]: any; }`
預設值	`未定義`

url

描述	為了使此路由適用，需要匹配的相對路徑。接受類似於 expressjs 的路徑，以便您可以在 url /foo/ 中定義參數:bar其中 bar 將在傳入的屬性中可用。
屬性	`url`
類型	`字串`
預設值	`''`

事件

名稱	描述	冒泡
`ionRouteDataChanged`	由 `ion-router` 內部使用，以了解此路由何時發生變更。	`true`

方法

此元件沒有可用的公用方法。

CSS 陰影部分

此元件沒有可用的 CSS 陰影部分。

CSS 自訂屬性

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

插槽

此元件沒有可用的插槽。

導覽鉤子​

介面​

使用方式​

屬性​

beforeEnter​

beforeLeave​

component​

componentProps​

url​

事件​

方法​

CSS 陰影部分​

CSS 自訂屬性​

插槽​

目錄

導覽鉤子

介面