What are some examples of navigation guards in Vue 3?

What are some examples of navigation guards in Vue 3?

In Vue 3, navigation guards are used to control access to routes. For example, you can use beforeEach to check if a user is authenticated before allowing access to a route.

Can you show me a code example of a beforeEach guard?

Sure! Here's a simple example:

router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // Replace with actual authentication check
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'Login' }); // Redirect to login if not authenticated
  } else {
    next(); // Proceed to the route
  }
});

What about afterEach guards? How do they work?

afterEach guards are called after the navigation is confirmed. They are useful for actions like logging. Here's an example:

router.afterEach((to, from) => {
  console.log(`Navigated to ${to.path} from ${from.path}`);
});

Are there any other types of navigation guards?

Yes, there are several types: beforeEnter, beforeRouteEnter, and beforeRouteLeave. Each serves different purposes in route management.