What are navigation guards in Vue Router?
Learn Vue Router navigation guards: global, per-route, and in-component hooks for auth, redirects, and unsaved-change prompts, using to/from and return values.
Expected Interview Answer
Navigation guards are hooks in Vue Router that run before, during, or after a route change, letting you allow, redirect, or cancel navigation. They are commonly used for authentication checks, permission gating, confirming unsaved changes, and data preloading.
Guards come in three scopes: global (beforeEach, beforeResolve, afterEach registered on the router), per-route (beforeEnter defined on a route record), and in-component (beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave). Each guard receives the target route (to) and the current route (from); returning false cancels navigation, returning a route location redirects, and returning true or nothing lets it proceed. In the current API you return a value instead of calling the old next() callback, and afterEach runs after navigation completes for tasks like analytics.
- Enforce authentication and role-based access before entering routes
- Redirect users based on state such as login status
- Warn about unsaved changes before leaving a form
- Preload or validate data before a view renders
- Centralize cross-cutting navigation logic with global guards
AI Mentor Explanation
A navigation guard is like the third umpire reviewing a delivery before the batter is allowed to continue — checking for a no-ball or edge. Only if everything is legal does play proceed; if not, the decision is reversed or redirected, exactly as a guard lets a route through, cancels it, or sends the user elsewhere.
Step-by-Step Explanation
Step 1
Choose the guard scope
Pick global (beforeEach), per-route (beforeEnter), or in-component (beforeRouteLeave) based on how broadly the logic applies.
Step 2
Register a global guard
Call router.beforeEach((to, from) => { ... }) to run logic before every navigation.
Step 3
Decide the outcome
Return true or nothing to allow, return false to cancel, or return a route location object to redirect.
Step 4
Guard specific routes
Add beforeEnter to a route record, or beforeRouteLeave in a component to confirm unsaved changes.
Step 5
Run post-navigation tasks
Use afterEach for side effects like analytics or updating the document title once navigation resolves.
What Interviewer Expects
- The three guard scopes: global, per-route, in-component
- Common uses such as auth, redirects, and unsaved-change prompts
- Understanding of to and from arguments
- How returning false or a location controls navigation
- Difference between beforeEach, beforeResolve, and afterEach
Common Mistakes
- Forgetting to return a value so navigation hangs or misbehaves
- Putting auth logic only in components instead of a global guard
- Creating redirect loops by redirecting to a route the guard also blocks
- Doing heavy synchronous work in a guard and blocking navigation
- Expecting afterEach to be able to cancel or redirect navigation
Best Answer (HR Friendly)
“Navigation guards are checkpoints Vue Router runs when someone tries to move between pages in the app. They let you decide whether the move is allowed, send the user somewhere else, or stop it entirely, which is how apps protect pages behind login or warn you about unsaved work.”
Code Example
router.beforeEach((to, from) => {
const isLoggedIn = Boolean(localStorage.getItem('token'))
if (to.meta.requiresAuth && !isLoggedIn) {
return { path: '/login', query: { redirect: to.fullPath } } // redirect
}
return true // allow navigation
})<script setup>
import { onBeforeRouteLeave } from 'vue-router'
import { ref } from 'vue'
const isDirty = ref(true)
onBeforeRouteLeave(() => {
if (isDirty.value) {
return window.confirm('You have unsaved changes. Leave anyway?')
}
})
</script>Follow-up Questions
- What is the difference between beforeEach, beforeResolve, and afterEach?
- How do you pass a redirect target so a user returns after login?
- When would you use beforeEnter instead of a global guard?
- How do you avoid infinite redirect loops in a guard?
- How does route meta help drive guard logic?
MCQ Practice
1. Which global guard is best suited for authentication checks before a route loads?
beforeEach runs before every navigation and can cancel or redirect it, making it the standard place for auth checks; afterEach cannot change the outcome.
2. In the current Vue Router API, how does a guard cancel a navigation?
Returning false from a guard cancels the navigation; returning a route location redirects, and returning true or nothing allows it to proceed.
3. Which guard is appropriate for warning about unsaved changes when leaving a page?
beforeRouteLeave (or onBeforeRouteLeave) runs when leaving a component's route, the right place to confirm discarding unsaved changes.
Flash Cards
Navigation guard purpose — Hooks that allow, redirect, or cancel a route change for auth, gating, or confirmations.
Three guard scopes — Global (beforeEach), per-route (beforeEnter), in-component (beforeRouteLeave/Enter/Update).
Guard arguments — Each guard receives to (target route) and from (current route).
Controlling the outcome — Return true/nothing to allow, false to cancel, a location to redirect.
afterEach role — Runs after navigation resolves for side effects like analytics; it cannot cancel.