ion-router

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4路由组件ion-router对项目进行布局。

ion-router官方文档地址:https://ionicframework.com/docs/api/router

Router is a component for handling routing inside vanilla JavaScript projects. For Angular projects, use ion-router-outlet and the Angular router.

Apps should have a single ion-router component in the codebase. This component controls all interactions with the browser history and it aggregates updates through an event system.

ion-router is just a URL coordinator for the navigation outlets of ionic: ion-nav and ion-tabs.

That means the ion-router never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells ion-nav and ion-tabs what and when to "show" based on the browser's URL.

In order to configure this relationship between components (to load/select) and URLs, ion-router uses a declarative syntax using JSX/HTML to define a tree of routes.

If you're using Angular, please see ion-router-outlet instead.

ion-router　用法(Usage)

<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>

ion-router　属性(Properties)

root
Description	By default `ion-router` will match the routes at the root path ("/"). That can be changed when
Attribute	`root`
Type	`string`
Default	`'/'`
useHash
Description	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 otherside 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.
Attribute	`use-hash`
Type	`boolean`
Default	`true`

ion-router　事件(Events)

Name	Description
`ionRouteDidChange`	Emitted when the route had changed
`ionRouteWillChange`	Event emitted when the route is about to change

ion-router　内置方法(Methods)

back
Description	Go back to previous page in the window.history.
Signature	`back() => Promise`
push
Description	Navigate to the specified URL.
Signature	`push(url: string, direction?: RouterDirection) => Promise`

ion-router

ion-router 用法(Usage)

ion-router 属性(Properties)

root

useHash

ion-router 事件(Events)

ion-router 内置方法(Methods)

back

push

ion-router　用法(Usage)

ion-router　属性(Properties)

ion-router　事件(Events)

ion-router　内置方法(Methods)