ion-router

路由器是用于处理 vanilla 和 Stencil JavaScript 项目中路由的组件。

备注

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

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

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

这意味着 ion-router 从不接触 DOM，它不显示组件或发出任何类型的生命周期事件，它只是告诉 ion-nav、ion-tabs 和 ion-router-outlet 根据浏览器 URL"显示"什么以及何时"显示"。

为了配置组件与 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

说明	The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
属性	root
类型	string
默认值	'/'

useHash

说明	The router can work in two "modes": - With hash: /index.html#/path/to/page - Without hash: /path/to/page Using one or another might depend in the requirements of your app and/or where it's deployed. Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work. On the other side hash-navigation is much easier to deploy, it even works over the file protocol. By default, this property is true, change to false to allow hash-less URLs.
属性	use-hash
类型	boolean
默认值	true

事件

Name	说明	冒泡
ionRouteDidChange	Emitted when the route had changed	true
ionRouteWillChange	Event emitted when the route is about to change	true

方法

back

说明	Go back to previous page in the window.history.
签名	back() => Promise<void>

push

说明	Navigate to the specified path.
签名	push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>
参数	path: The path to navigate to. direction: The direction of the animation. Defaults to "forward".

CSS 阴影部分

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

CSS 自定义属性

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

插槽

该组件没有可用的插槽。