midVue.js
What are 'Navigation Guards' in Vue Router?
Updated May 4, 2026
Short answer
Navigation guards are hooks that allow you to redirect or cancel a navigation during the routing process.
Deep explanation
Guards can be global (beforeEach), per-route (beforeEnter), or in-component (onBeforeRouteLeave). They are primarily used for authentication checks, data pre-fetching, or preventing users from leaving a page with unsaved changes.
Real-world example
Protecting a /profile page so only logged-in users can access it.
Common mistakes
- Forgetting to return a value or call `next()` in older versions of Vue Router, which stalls the navigation.
Follow-up questions
- What is the order of execution for guards?