API

Hooks/Methods

Renderers

Renderers have a number of hooks/methods available to structure them and call pieces of Javascript at key moments on navigation. Read more of the documentation about renderers.

Methods	Details
`onEnter()`	This method in the renderer is run when the `data-router-view` is added to the DOM Tree.
`onLeave()`	This method in the renderer is run when transition to hide the `data-router-view` is called.
`onEnterCompleted()`	This method in the renderer is run when the transition to display the `data-router-view` is done.
`onLeaveCompleted()`	This method in the renderer is run when the `data-router-view` is removed from the DOM Tree.

Transitions have a number of hooks/methods available to manage which animations should be run to display a page and which one should be run to hide it. Read more of the documentation about transitions.

Methods Method Parameters Details

Methods	Method Parameters	Details
`in({ from, to, trigger, done })`	`to \| <Node>` `from \| <Node>` `done \| <Callback>` `trigger \| <Node\|String>`	This method is called to display the `data-router-view` under the `to` parameter and, for overlaping transitions only, to hide the `data-router-view` under the `from` parameter. Once the animation is over the `done()` callback has to be called to continue the navigation process. The `trigger` parameter contains either the link triggering the transition, `popstate` when the back/forward button of the browser triggers the transition or `script` for programmatical redirection.
`out({ from, trigger, done })`	`from \| <Node>` `done \| <Callback>` `trigger \| <Node\|String>`	This method is called to hide the `data-router-view` under the `from` parameter. Once the animation is over the `done()` callback has to be called to continue the navigation process. The `trigger` parameter contains either the link triggering the transition, `popstate` when the back/forward button of the browser triggers the transition or `script` for programmatical redirection.

in({ from, to, trigger, done })

This method is called to display the data-router-view under the to parameter and, for overlaping transitions only, to hide the data-router-view under the from parameter. Once the animation is over the done() callback has to be called to continue the navigation process.

The trigger parameter contains either the link triggering the transition, popstate when the back/forward button of the browser triggers the transition or script for programmatical redirection.

out({ from, trigger, done })

from | <Node>
done | <Callback>
trigger | <Node|String>

This method is called to hide the data-router-view under the from parameter. Once the animation is over the done() callback has to be called to continue the navigation process.

The trigger parameter contains either the link triggering the transition, popstate when the back/forward button of the browser triggers the transition or script for programmatical redirection.

Core

Highway.Core comes with some built-in and useful methods developers can have access to once it has been called with new Highway.Core(). Read more of the documentation about the core of Highway.

Methods	Method Parameters	Details
`attach(links)`	`links \| <Array\|NodeList>`	All links on a page that don't have the `target` attribute or the `data-router-disabled` attribute are attached to Highway by default. This methods can be used to programatically attach links to Highway.
`detach(links)`	`links \| <Array\|NodeList>`	All links in a `data-router-view` that is hidden are detached from Highway by default. This methods can be used to programatically detach links from Highway.
`redirect(href, transition)`	`href \| <String>` `transition \| <String>`	This method can be used to programatically redirect to an internal page with Highway. A transition key, as defined in your highway configuration, can be optionally added to the method to override the transition related to the page. The transition related to the page will be used if no transition is added to this method.

Events

Highway.Core extends tiny-emitter so it gives developers access to all the methods from tiny-emitter. Those methods can be used to listen to the following events sent by Highway in the navigation process.

Events	Callback Parameters	Details
`NAVIGATE_IN`	`to \| <Node>` `trigger \| <Node\|String>` `location \| <Object>`	This event is sent everytime a `data-router-view` is added to the DOM Tree. The callback method of the event gets an `Object` as a parameter that contains the `data-router-view` under the `to` key, the triggered element under the `trigger` key and all the URL informations under the `location` key.
`NAVIGATE_OUT`	`from \| <Node>` `trigger \| <Node\|String>` `location \| <Object>`	This event is sent everytime the `out()` method of a transition is run to hide a `data-router-view`. The callback method of the event gets an `Object` as a parameter that contains the `data-router-view` under the `from` key, the triggered element under the `trigger` key and all the URL informations under the `location` key.
`NAVIGATE_END`	`to \| <Node>` `from \| <Node>` `trigger \| <Node\|String>` `location \| <Object>`	This event is sent everytime the `done()` method is called in the `in()` method of a transition. The callback method of the event gets an `Object` as a parameter that contains the new `data-router-view` under the `to` key, the old `data-router-view` under the `from` key, the triggered element under the `trigger` key and all the URL informations under the `location` key.

Examples