Navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.
Params or query changes won't trigger enter/leave navigation guards. You can either watch the $route object to react to those changes, or use the beforeRouteUpdate in-component guard.
Global Guards
to: Route: the target Route Object being navigated to.
from: Route: the current route being navigated away from.
next: Function: this function must be called to resolve the hook.
