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.