ion-router

路由器是一个用于处理普通和 Stencil JavaScript 项目中路由的组件。

注意

注意: 此组件应仅与普通和 Stencil JavaScript 项目一起使用。请参阅有关 Angular、React 和 Vue 的路由指南，以获取特定于框架的路由解决方案。

应用应该在代码库中只有一个 ion-router 组件。此组件控制与浏览器历史记录的所有交互，并通过事件系统汇总更新。

ion-router 只是 Ionic 导航出口的 URL 协调器: ion-nav、ion-tabs 和 ion-router-outlet。

这意味着 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
类型	string
默认	'/'

useHash

描述	路由器可以在两种“模式”下工作: - 带有哈希: /index.html#/path/to/page - 不带哈希: /path/to/page 使用哪一种可能取决于您的应用的要求以及/或者其部署位置。 通常，“无哈希”导航更适合 SEO，并且也更方便用户，但它可能需要额外的服务器端配置才能正常工作。 另一方面，哈希导航更容易部署，它甚至可以通过文件协议工作。 默认情况下，此属性为 true，更改为 false 以允许无哈希 URL。
属性	use-hash
类型	boolean
默认	true

事件

名称	描述	冒泡
ionRouteDidChange	当路由发生变化时发出	true
ionRouteWillChange	当路由即将发生变化时发出的事件	true

方法

back

描述	返回窗口.history 中的上一页。
签名	back() => Promise<void>

push

描述	导航到指定的路径。
签名	push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>

CSS 阴影部分

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

CSS 自定义属性

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

插槽

此组件没有可用的插槽。