Preventing navigation

It is a common case to want to allow / prevent navigation away from a view or component: if a User is in the middle of completing a form and data has not been saved, you might want to warn them about data being lost or prevent them to leave the current view until data has been saved.
Using lifecycle functions
Router5 supports canActivate and canDeactivate functions for route segments:
canActivate functions are called on segments which will become active as a result of a route change
canDeactivate functions are called on segments which will become inactive as a result of a route change
Both functions have the same signature than middleware functions. Their result can be synchronous (returning a boolean) or asynchronous (returning a promise or calling done(err, result)).
if a canActivate or canDeactivate function doesn't return a boolean, a promise or doesn't call back, the transition will not proceed.
const canActivate = (router) => (toState, fromState) => {
    return true;
}
​
router.canActivate('admin', canActivate);
canActivate functions are called from top to bottom on newly activated segments. canDeactivate methods are invoked from bottom to top.
Using middleware functions
Middleware functions behave like canActivate and canDeactivate. Read more about middleware.

Middleware

Errors and redirections

Last modified 4yr ago

Copy link

Outline

Using lifecycle functions

Using middleware functions