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，它不展示组件也不触发任何生命周期事件，它只是根据浏览器的 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

说明	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". animation: A custom animation to use for the transition.

CSS Shadow Parts

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

CSS 自定义属性

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

插槽

该组件没有可用的插槽。