Vaadin Router manages the lifecycle of all route Web Components. Lifecycle callbacks allow you to add custom logic to any point of this lifecycle:
onBeforeEnter(location, commands, router): Promise | Prevent | Redirect |
void
onAfterEnter(location, commands, router): void
onBeforeLeave(location, commands, router): Promise | Prevent | void
onAfterLeave(location, commands, router): void
'vaadin-router-location-changed' /
'vaadin-router-error' events on the window
disconnectedCallback()).
onBeforeEnter(location, commands, router)The component's route has matched the current path, an instance of the component has been created and is about to be inserted into the DOM. Use this callback to create a route guard (e.g. redirect to the login page if the user is not logged in).
At this point there is yet no guarantee that the navigation into this view will actually happen because another route's callback may interfere.
This callback may return a redirect (return
commands.redirect('/new/path')) or a prevent (return
commands.prevent()) router command. If it returns a promise, the
router waits until the promise is resolved before proceeding with the
navigation.
See the API documentation for more details.
Note: Navigating to the same route also triggers this callback,
e.g., click on the same link multiple times will trigger the onBeforeEnter
callback on each click.
onAfterEnter(location, commands, router)The component's route has matched the current path and an instance of the component has been rendered into the DOM. At this point it is certain that navigation won't be prevented or redirected. Use this callback to process route params and initialize the view so that it's ready for user interactions.
NOTE: When navigating between views the onAfterEnter
callback on the new view's component is called before the
onAfterLeave callback on the previous view's component (which
is being removed). At some point both the new and the old view components
are present in the DOM to allow
animating the
transition (you can listen to the animationend event to
detect when it is over).
Any value returned from this callback is ignored. See the API documentation for more details.
onBeforeLeave(location, commands, router)The component's route does not match the current path anymore and the component is about to be removed from the DOM. Use this callback to prevent the navigation if necessary like in the demo below. Note that the user is still able to copy and open that URL manually in the browser.
Even if this callback does not prevent the navigation, at this point there is yet no guarantee that the navigation away from this view will actually happen because another route's callback may also interfere.
This callback may return a prevent (return
commands.prevent()) router command. If it returns a promise, the
router waits until the promise is resolved before proceeding with the
navigation.
See the API documentation for more details.
Note: Navigating to the same route also triggers this callback,
e.g., click on the same link multiple times will trigger the onBeforeLeave
callback on each click.
User name: [[location.params.user]]
Delete useronAfterLeave(location, commands, router)The component's route does not match the current path anymore and the component's removal from the DOM has been started (it will be removed after a transition animation, if any). At this point it is certain that navigation won't be prevented. Use this callback to clean-up and perform any custom actions that leaving a view should trigger. For example, the demo below auto-saves any unsaved changes when the user navigates away from the view.
NOTE: When navigating between views the onAfterEnter
callback on the new view's component is called before the
onAfterLeave callback on the previous view's component (which
is being removed). At some point both the new and the old view components
are present in the DOM to allow
animating the
transition (you can listen to the animationend event to
detect when it is over).
Any value returned from this callback is ignored. See the API documentation for more details.
In order to react to route changes in other parts of the app (outside of
route components), you can add an event listener for the
vaadin-router-location-changed events on the window.
Vaadin Router dispatches such events every time after navigating to a
new path.
In case if navigation fails for any reason (e.g. if no route matched the
given pathname), instead of the vaadin-router-location-changed
event Vaadin Router dispatches vaadin-router-error and
attaches the error object to the event as event.detail.error.
When handling Vaadin Router events, you can access the router instance via
event.detail.router, and the current location via
event.detail.location (which is a shorthand for
event.detail.router.location). The
location
object has all details about the current router state. For example,
location.routes is a read-only list of routes that correspond
to the last completed navigation, which may be useful for example when
creating a breadcrumbs component to visualize the current in-app location.
The router configuration allows you to add any custom properties to route
objects. The example above uses that to set a custom xBreadcrumb
property on the routes that we want to show up in breadcrumbs. That
property is used later when processing the vaadin-router-location-changed
events.
For using with components defined as TypeScript classes, the following interfaces are available for implementing:
BeforeEnterObserver
import {
BeforeEnterObserver,
PreventAndRedirectCommands,
Router,
RouterLocation
} from '@vaadin/router';
@customElement('my-view-with-before-enter')
class MyViewWithBeforeEnter extends LitElement implements BeforeEnterObserver {
onBeforeEnter(
location: RouterLocation,
commands: PreventAndRedirectCommands,
router: Router) {
// ...
}
}AfterEnterObserver
import {
AfterEnterObserver,
EmptyCommands,
Router,
RouterLocation
} from '@vaadin/router';
@customElement('my-view-with-after-enter')
class MyViewWithAfterEnter extends LitElement implements AfterEnterObserver {
onAfterEnter(
location: RouterLocation,
commands: EmptyCommands,
router: Router) {
// ...
}
}BeforeLeaveObserver
import {
BeforeLeaveObserver,
PreventCommands,
Router,
RouterLocation
} from '@vaadin/router';
@customElement('my-view-with-before-leave')
class MyViewWithBeforeLeave extends LitElement implements BeforeLeaveObserver {
onBeforeLeave(
location: RouterLocation,
commands: PreventCommands,
router: Router) {
// ...
}
}AfterLeaveObserver
import {
AfterLeaveObserver,
EmptyCommands,
Router,
RouterLocation
} from '@vaadin/router';
@customElement('my-view-with-after-leave')
class MyViewWithAfterLeave extends LitElement implements AfterLeaveObserver {
onAfterLeave(
location: RouterLocation,
commands: EmptyCommands,
router: Router) {
// ...
}
}