ion-route

路由（Route）组件接收一个组件，并在浏览器 URL 与 url 属性匹配时渲染它。

备注

注意：此组件仅应与 vanilla 和 Stencil JavaScript 项目一起使用。对于 Angular 项目，请使用 ion-router-outlet 和 Angular 路由。

导航钩子

导航钩子可用于执行任务或作为导航守卫。钩子通过为每个 ion-route 的 beforeEnter 和 beforeLeave 属性提供函数来使用。返回 true 允许导航继续，而返回 false 则取消导航。返回 NavigationHookOptions 类型的对象允许你将导航重定向到另一页面。

接口

interface NavigationHookOptions {
  /**
   * 重定向导航的有效路径。
   */
  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(); // 用实际的登录验证替换

  if (isLoggedIn) {
    return true;
  } else {
    return { redirect: '/login' }; // 如果用户未登录，他们将被重定向到 /login 页面
  }
};

const hasUnsavedDataGuard = async () => {
  const hasUnsavedData = await checkData(); // 用实际的验证替换

  if (hasUnsavedData) {
    return await confirmDiscardChanges();
  } else {
    return true;
  }
};

const confirmDiscardChanges = async () => {
  const alert = document.createElement('ion-alert');
  alert.header = '放弃未保存的更改？';
  alert.message = '你确定要离开吗？任何未保存的更改都将丢失。';
  alert.buttons = [
    {
      text: '取消',
      role: 'Cancel',
    },
    {
      text: '放弃',
      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(); // 用实际的登录验证替换

  if (isLoggedIn) {
    return true;
  } else {
    return { redirect: '/login' }; // 如果用户未登录，他们将被重定向到 /login 页面
  }
};

const hasUnsavedDataGuard = async () => {
  const hasUnsavedData = await checkData(); // 用实际的验证替换

  if (hasUnsavedData) {
    return await confirmDiscardChanges();
  } else {
    return true;
  }
};

const confirmDiscardChanges = async () => {
  const alert = await alertController.create({
    header: '放弃未保存的更改？',
    message: '你确定要离开吗？任何未保存的更改都将丢失。',
    buttons: [
      {
        text: '取消',
        role: 'Cancel',
      },
      {
        text: '放弃',
        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(); // 用实际的登录验证替换

    if (isLoggedIn) {
      return true;
    } else {
      return { redirect: '/login' }; // 如果用户未登录，他们将被重定向到 /login 页面
    }
  };

  const hasUnsavedDataGuard = async () => {
    const hasUnsavedData = await checkData(); // 用实际的验证替换

    if (hasUnsavedData) {
      return await confirmDiscardChanges();
    } else {
      return true;
    }
  };

  const confirmDiscardChanges = async () => {
    const alert = await alertController.create({
      header: '放弃未保存的更改？',
      message: '你确定要离开吗？任何未保存的更改都将丢失。',
      buttons: [
        {
          text: '取消',
          role: 'Cancel',
        },
        {
          text: '放弃',
          role: 'destructive',
        },
      ],
    });

    await alert.present();

    const { role } = await alert.onDidDismiss();

    return role === 'Cancel' ? false : true;
  };
</script>

属性

beforeEnter

说明	A navigation hook that is fired when the route tries to enter. Returning true allows the navigation to proceed, while returning false causes it to be cancelled. Returning a NavigationHookOptions object causes the router to redirect to the path specified.
属性	undefined
类型	(() => NavigationHookResult ｜ Promise<NavigationHookResult>) ｜ undefined
默认值	undefined

beforeLeave

说明	A navigation hook that is fired when the route tries to leave. Returning true allows the navigation to proceed, while returning false causes it to be cancelled. Returning a NavigationHookOptions object causes the router to redirect to the path specified.
属性	undefined
类型	(() => NavigationHookResult ｜ Promise<NavigationHookResult>) ｜ undefined
默认值	undefined

component

说明	Name of the component to load/select in the navigation outlet (ion-tabs, ion-nav) when the route matches. The value of this property is not always the tagname of the component to load, in ion-tabs it actually refers to the name of the ion-tab to select.
属性	component
类型	string
默认值	undefined

componentProps

说明	A key value { 'red': true, 'blue': 'white'} containing props that should be passed to the defined component when rendered.
属性	undefined
类型	undefined ｜ { [key: string]: any; }
默认值	undefined

url

说明	Relative path that needs to match in order for this route to apply. Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
属性	url
类型	string
默认值	''

事件

Name	说明	冒泡
ionRouteDataChanged	Used internally by ion-router to know when this route did change.	true

方法

该组件没有可用的公共方法。

CSS 阴影部分

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性

该组件没有可用的 CSS 自定义属性。

插槽

该组件没有可用的插槽。