How do I implement redirects using Vue 3 router guards?

How do I implement redirects using Vue 3 router guards?

You can implement redirects in Vue 3 using navigation guards. You can use the beforeEach guard to check conditions and redirect accordingly.

Can you show me a code example?

Sure! Here's a simple example:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard }
  ]
});

router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // Replace with your auth logic
  if (to.path === '/dashboard' && !isAuthenticated) {
    next('/login'); // Redirect to login if not authenticated
  } else {
    next(); // Proceed to the route
  }
});

This code checks if the user is authenticated before accessing the dashboard.

What if I want to redirect after a successful login?

You can modify the next function in your login method to redirect the user after a successful login. For example:

methods: {
  login() {
    // Assume login logic here
    this.$router.push('/dashboard'); // Redirect to dashboard after login
  }
}

Are there any other types of guards I should know about?

Yes, besides beforeEach, you can use beforeEnter for route-specific guards and afterEach for actions after navigation.