Vue Router Redirect Usage Guide

Vue Router Redirect Usage Guide

Introduction:
Vue Router is the official router in Vue.js, which allows us to perform page navigation and routing management. One of the powerful features is redirection, which can easily navigate users to different pages. This article will introduce you to the redirection function of Vue Router in detail and provide specific code examples.

1. The role of Vue Router redirection
In our applications, we often need to navigate users to different pages based on different conditions, such as navigating users from the login page to the homepage, or from The unauthorized page navigates to the login page. Vue Router provides an easy way to navigate and redirect between these pages.

2. Basic syntax of Vue Router redirection
In Vue Router, we can use the redirect attribute to implement redirection. When a user tries to access a route but doesn't have access, we can redirect them to another route. redirect The property accepts a string or a function as a parameter.

1. String Redirect:

   const router = new VueRouter({
     routes: [
    {
      path: '/login',
      component: LoginComponent
    },
    {
      path: '/home',
      component: HomeComponent,
      redirect: '/dashboard'
    },
    {
      path: '/dashboard',
      component: DashboardComponent
    }
     ]
   })

   In the above example, when users access the /home route, they will be redirected to /dashboard Routing.

2. Function Redirect:

   const router = new VueRouter({
     routes: [
    {
      path: '/admin',
      component: AdminComponent,
      meta: { requiresAuth: true },
      redirect: to => {
        if (isAdmin(to)) {
          return '/dashboard'
        } else {
          return '/unauthorized'
        }
      }
    },
    {
      path: '/dashboard',
      component: DashboardComponent
    },
    {
      path: '/unauthorized',
      component: UnauthorizedComponent
    }
     ]
   })

   In the above example, when the user accesses the /admin route, the function redirect The user will be redirected to the /dashboard or /unauthorized route based on the user's permissions.

3. Advanced usage of Vue Router redirection
In addition to simple redirection, Vue Router also provides some other advanced redirection usage.

1. Dynamic redirection:
   We can use the $router.push() method to implement dynamic redirection. This method accepts a URL parameter that needs to be redirected, which can be a string or object.

   this.$router.push('/dashboard')

   In the above example, when the user performs an action, we can use the $router.push() method to redirect them to the /dashboard route .

2. Conditional redirection:
   In some cases, we may need to redirect users based on different conditions. Vue Router provides beforeEnter navigation guard to implement conditional redirection.

   const router = new VueRouter({
     routes: [
    {
      path: '/profile',
      component: ProfileComponent,
      beforeEnter: (to, from, next) => {
        if (isAuthenticated()) {
          next()
        } else {
          next('/login')
        }
      }
    },
    {
      path: '/login',
      component: LoginComponent
    }
     ]
   })

   In the above example, when the user accesses the /profile route, the beforeEnter navigation guard will determine whether to redirect the user to based on the user's login status. /login route.

Summary:
This article introduces the redirection function of Vue Router and provides specific code examples. By using redirection, we can easily implement page navigation and route management in the application. I hope this article will help you understand and use the redirection function of Vue Router.

The above is the detailed content of Vue Router Redirect Usage Guide. For more information, please follow other related articles on the PHP Chinese website!