What Are Navigation Guards in Vue Router

In Vue Router, navigation guards are functions that are executed before or after navigation to a route occurs. They allow developers to control and customize the navigation behavior of their Vue.js applications. Navigation guards provide hooks at different stages of the navigation process, allowing developers to perform tasks such as authentication, authorization, data fetching, and route validation.

There are three types of navigation guards in Vue Router.

Global Navigation Guards

These guards are applied to all routes in the application and are defined at the root level of the router configuration. They include beforeEachbeforeResolve, and afterEach.

  • beforeEachExecuted before each navigation. It is commonly used for authentication and authorization checks. If the navigation is blocked by returning false or by calling, the navigation will be aborted.
  • beforeResolveExecuted after all async components are resolved, but before the navigation is confirmed. It is useful for performing data fetching tasks or other async operations before the route is rendered.
  • afterEach: Executed after each navigation. It is useful for logging, analytics, or cleanup tasks.

Up Next
    Ebook Download
    View all
    View all