Navigation Guards
Learn about global guards and per-route guards in Vue.
Navigation guards provide a way to hook into certain points in the routing process. We can attach callbacks to these hooks that will run globally (that is, for all routes) or on a per-route basis.
Navigation guards are most commonly used to apply authorization checking to routes, so part (or all) of our app can be restricted to authenticated users.
Global guards
Global guards can be assigned by calling any of the methods below and passing in a function that we want to be called. Multiple functions can be assigned to each guard and will be called in the order they’re registered in. Control will pass from one function to the next unless the navigation is canceled.
The beforeEach
hook
The beforeEach
hook is called as soon as navigation is triggered to any registered route. Callbacks are passed three arguments: to
, from
, and next
.
Get hands-on with 1400+ tech skills courses.