Sets the "target" automatically to "_blank" if no "target" is set and an anchor tag is used with a href which is not local or a "hylo-router-link" is used and it does not trigger the router.
Disables the router when this class is given to the body tag.
A called hylo-router-link component will be handled as it would be a simple anchor/link tag. A hylo-template component placed inside a hylo-nav component will not be removed.
Basicly you get normal page loading, no one pager functionality.
It does not matter if the body class is placed in the current active page or in the to be loaded page. The difference is that the to be loaded page will get loaded twice. First as dynamic template where it gets checked for the body class and than again as a normal single page if the class is set.
Disables the router when this class is given to the html tag.
A called hylo-router-link component will be handled as it would be a simple anchor/link tag. A hylo-template component placed inside a hylo-nav component will not be removed.
Basicly you get normal page loading, no one pager functionality.
It does not matter if the html class is placed in the current active page or in the to be loaded page. The difference is that the to be loaded page will get loaded twice. First as dynamic template where it gets checked for the html class and than again as a normal single page if the class is set.
Disables the router when this id exist.
A called hylo-router-link component will be handled as it would be a simple anchor/link tag. A hylo-template component placed inside a hylo-nav component will not be removed.
Basicly you get normal page loading, no one pager functionality.
It does not matter if the id is placed in the current active page or in the to be loaded page. The difference is that the to be loaded page will get loaded twice. First as dynamic template where it gets checked for the id and than again as a normal single page if the id is set.
Disables the router.
A called hylo-router-link component will be handled as it would be a simple anchor/link tag. A hylo-template component placed inside a hylo-nav component will not be removed.
Basicly you get normal page loading, no one pager functionality.
Let anchor/"a" tags with a href attribute which is local be handled by the router. By default only "hylo-router-link" components are handled by the router.
Can be disabled by giving the anchor tag the class "no-router".
A comma separated string of hosts which will be treated as local. If a url with a local host is called through a hylo-router-link, the url will be loaded by the router by only taking the "path" of the url into account.
If a "target" is set and it is other than "_self", the link will not be treated as local.
e.g.: '127.0.0.0, berlin-buehnen.de, www.berlin-buehnen.de, staging.berlin-buehnen.de'
The id of the hylo-nav/ion-nav component which is controlled by the hylo-router component. This will be used to improve the back() functionality.
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.
The router can work in two "modes":
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.
Extends the ion-router push function by a query parameter. Replaces the url in the browser history set by the ion-router with the url including the search query string.
Also checks if the current url and the provided url are equal in which case the function returns with true without actually pushing the url to avoid duplicate entries in the browser history. The search query string is ignored for the check.
Converts a query string which is passed along as part of the url parameter into a query key/value object for the second parameter if the second parameter is not set.
If the current url equates the provided url and a query is given, the query is used to replace the current one. Fires the event "hyloLocationSearchChanged" on the window object in that case. If you just want to change the url search query, you can use the functions provided in hylo-components/utils/usefull/usefull.ts
same as ion-router
Optional query: URLSearchParams | { a query object either as key, value pairs or as URLSearchParams object
Optional direction: RouterDirectionsame as ion-router
Fires when only the url search query changed but not the url itself. Fires on the window object, not on this component.
See addToLocationSearch(), appendToLocationSearch(), replaceLocationSearch(), removeFromLocationSearch() in ylo-components/utils/usefull/usefull.ts
Same as ion-router except it includes the chain.
ionRouteDidChange might fire several times while hyloRouteDidChange only fires once in one hylo-router route change.
Same as ion-router except that it includes the chain and the event will fire after a possible url replacement because of a provided query object with the push() function.
ionRouteWillChange might fire several times while hyloRouteWillChange only fires once in one hylo-router route change.
Generated using TypeDoc
Alternative router to the ion-router which adds a couple more features to the router.
Wraps an ion-router component.
In case of a prerender environment no ion-router is rendered!
If an ion-nav is defined, the following public functions will be called in the ion-route components if they exist:
componentDidActivate(): whenever the component is added to the stack or is brought back to the top of the stack
componentWillDeactivate(): whenever the component looses its top position in the ion-nav stack
componentWillReactivate(): whenever the component is brought back from second to top position to top position in the stack through the browser back functionality or the back() function of the hylo-router component.
componentDidActivate() is called after componentDidLoad()
componentWillReactivate() is called before componentDidActivate()
If a hylo-nav component is defined without an ion-nav component, "componentDidActivate" and "componentWillDeactivate" is called. It's called by the hylo-nav component.
Also the hylo-router component will set the variables "hylo_route_url", "hylo_route_scrollTop" in the ion-route component. Be aware of it and don't overwrite them.