ion-route

ルートコンポーネントは、ブラウザのURLが`url`プロパティと一致する場合に、コンポーネントを受け取り、それをレンダリングします。

注記

注記: このコンポーネントは、プレーンなJavaScriptとStencil JavaScriptプロジェクトでのみ使用してください。Angularプロジェクトの場合は、ion-router-outletとAngular Routerを使用してください。

ナビゲーションフック

ナビゲーションフックを使用して、タスクを実行したり、ナビゲーションガードとして機能させることができます。フックは、各ion-routeのbeforeEnterおよびbeforeLeaveプロパティに関数を提供することで使用されます。`true`を返すとナビゲーションが続行され、`false`を返すとキャンセルされます。`NavigationHookOptions`型のオブジェクトを返すと、別のページにナビゲーションをリダイレクトできます。

インターフェース

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

使用方法

JavaScript

<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;
}

Stencil

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;
}

Vue

<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) | undefined
デフォルト	未定義

beforeLeave

説明	ルートが離れようとするときに発生するナビゲーションフック。`true`を返すとナビゲーションが続行され、`false`を返すとキャンセルされます。`NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトされます。
属性	未定義
型	(() => NavigationHookResult | Promise) | 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カスタムプロパティはありません。

スロット

このコンポーネントで使用できるスロットはありません。