版本：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

描述	一个包含要传递给定义的组件的 props 的键值 `{ 'red': true, 'blue': 'white'}`，在渲染时。
属性	`未定义`
类型	`未定义｜ { [key: string]: any; }`
默认值	`未定义`

url

描述	为了使此路由生效，需要匹配的相对路径。接受类似于 expressjs 的路径，以便您可以在 url 中定义参数 /foo/:bar其中 bar 将在传入 props 中可用。
属性	`url`
类型	`字符串`
默认值	`''`

事件

名称	描述	冒泡
`ionRouteDataChanged`	由 `ion-router` 内部使用，以了解此路由何时发生了变化。	`true`

方法

此组件没有公开方法。

CSS 阴影部分

此组件没有 CSS 阴影部分。

CSS 自定义属性

此组件没有 CSS 自定义属性。

插槽

此组件没有插槽。

导航钩子​

接口​

用法​

属性​

beforeEnter​

beforeLeave​

component​

componentProps​

url​

事件​

方法​

CSS 阴影部分​

CSS 自定义属性​

插槽​

目录

导航钩子

接口

用法

属性