This feature is for advanced use cases. Please make sure to read the documentation carefully.
There are several events that can trigger in-app navigation with
Vaadin Router: popstate events, clicks on the <a>
elements, imperative navigation triggered by JavaScript. In order to make
a flexible solution that can be tweaked to particular app needs and remain
efficient, Vaadin Router has a concept of pluggable Navigation
Triggers that listen to specific browser events and convert them into
the Vaadin Router navigation events.
The @vaadin/router package comes with two Navigation
Triggers bundled by default: POPSTATE and CLICK.
Developers can define and use additional Navigation Triggers that are
specific to their application. A Navigation Trigger object must have
two methods: activate() to start listening on some UI events,
and inactivate() to stop.
NavigationTrigger.POPSTATE
The default POPSTATE navigation trigger for Vaadin Router
listens to popstate events on the current window
and for each of them dispatches a navigation event for Vaadin Router
using the current window.location.pathname as the navigation
target. This allows using the browser Forward and Back buttons for in-app
navigation.
In the demo below the popstate events are dispatched at 3
seconds intervals. Before dispatching an event the global
location.pathname is toggled between '/' and '/users'.
Please note that when using the window.history.pushState() or
window.history.replaceState() methods, you need to dispatch
the popstate event manually—these methods do not do
that by themselves (see MDN for details).
NavigationTrigger.CLICK
The CLICK navigation trigger intercepts clicks on
<a> elements on the the page and converts them into
navigation events for Vaadin Router if they refer to a
location within the app. That allows using regular <a>
link elements for in-app navigation. You can use router-ignore
attribute to have the router ignore the link.
The set of default navigation triggers can be changed using the
Router.setTriggers() static method. It accepts zero, one or more
NavigationTriggers.
This demo shows how to disable the CLICK navigation trigger.
It may be useful when the app has an own custom element for in-app links
instead of using the regular <a> elements for that
purpose. The demo also shows a very basic version of a custom in-app link
element based on a list element that fires popstate events
when clicked.
Note: if the default Navigation Triggers are not used by the app, they can
be excluded from the app bundle to avoid sending unnecessary code to the
users. See src/router-config.js for details.
Each Vaadin Router instance is automatically subscribed to navigation
events upon creation. Sometimes it might be necessary to cancel this
subscription so that the router would re-render only in response to the
explicit render() method calls. Use the unsubscribe()
method to cancel this automatic subscription and the
subscribe() method to re-subscribe.