rv-route
Loads a link and injects the content inside the selected view container. The target is prefetched on mouseover and touchstart. This binder is like a normal link in barba.js but allows a bit more control.
Instead of the URL you can also pass some options to the binder as a object (by keypath) or as a json string
| Option name | Default | Description |
|---|---|---|
| url | The url you want to load on click. | |
| viewId | 'main' |
The id of the view in which the content should be replaced. |
| removeAfterActivation | false |
Remove the element from the DOM after activation. |
| newTab | false |
Open the route in a new tab. |
| newTabOnExtern | true |
Open external urls in a new tab by default. |
This button targets viewId: 'example-view'. Open the Router Components page and activate the router-view preview to see it in action.
If a route points to the same url as the active route of the targeted view, the click is ignored intentionally (already on this site, do nothing).
rv-route-class-*
Tests the url with the current location, if the url is equal to the current location this element gets the class
rv-parent-route-class-*
Tests the url with the current location, if the current location starts with the url this element gets the [classname] class
rv-route-preload
rv-route-preload preloads a URL into the router cache.
<a rv-route-preload="'/products.html'">Warm products route</a>
Use this for high-priority routes you know users are likely to open next.
rv-route-back-on-*
rv-route-back-on-* listens to a custom event and performs history.back().
<button rv-route-back-on-click>Back</button>
This is useful when you need declarative back navigation behavior on custom UI elements.