What is a route guard?

A function that controls route navigation.

Why use route guards?

To protect routes and control access.

Vue Route Guards - Learn VUEJS | Revochamp

Name: Vue Route Guards
Availability: InStock
Author: Revochamp

What are Route Guards?

Route guards are functions that run before or during navigation to control access to routes in a Vue application.

Types of Route Guards

Type	Usage
Global Guards	Applied to all routes
Per-Route Guards	Defined inside route config
In-Component Guards	Defined inside components

Global Before Guard

JavaScriptRead-only

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

Per-Route Guard

JavaScriptRead-only

{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    if (!isAdmin) next('/');
    else next();
  }
}

{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    if (!isAdmin) next('/');
    else next();
  }
}

In-Component Guard

JavaScriptRead-only

beforeRouteEnter(to, from, next) {
  next(vm => {
    // access component instance
  });
}

beforeRouteEnter(to, from, next) {
  next(vm => {
    // access component instance
  });
}

Common Use Cases

Authentication check
Authorization control
Redirecting users
Preventing access to certain routes

Navigation Flow

Guards run in sequence before navigation is confirmed, allowing control over routing behavior.

Best Practices

Use global guards for auth checks
Keep guard logic simple
Avoid heavy operations in guards
Use meta fields for route rules

Common Mistakes

Forgetting to call next()
Blocking navigation unintentionally
Using complex logic inside guards
Not handling async operations properly

Conclusion

Route guards are essential for controlling navigation and securing routes in Vue applications.

Type

Usage

Global Guards

Applied to all routes

Per-Route Guards

Defined inside route config

In-Component Guards

Defined inside components

Vue Route Guards

Vue Route Guards

What are Route Guards?

Types of Route Guards

Global Before Guard

Per-Route Guard

In-Component Guard

Common Use Cases

Navigation Flow

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

Vue Route Guards

Vue Route Guards

What are Route Guards?

Types of Route Guards

Global Before Guard

Per-Route Guard

In-Component Guard

Common Use Cases

Navigation Flow

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?