Detailed explanation of redirection configuration of Vue Router

Detailed explanation of redirection configuration of Vue Router

Vue Router is the official routing management plug-in of Vue.js. It realizes jumping between different pages by configuring the routing table. Turn and navigate. During development using Vue Router, we often encounter situations where we need to redirect pages. This article will introduce the redirection configuration of Vue Router in detail and provide specific code examples.

1. Basic redirection

Vue Router supports basic redirection configuration through the redirect field. In this way, we can redirect a certain path to another path to achieve page jump. Here is a simple example:

const routes = [
  { path: '/home', redirect: '/' },
]

In the above example, when the user accesses the /home path, they will be redirected to the root path /.

2. Dynamic redirection

In addition to basic redirection configuration, Vue Router also supports dynamic configuration of redirection through function return values. In this way, we can determine the redirection target path based on certain conditions. The following is an example of using a function to dynamically configure redirection:

const routes = [
  { 
    path: '/user/:id',
    redirect: (to) => {
      const { id } = to.params;
      if (id === 'admin') {
        return '/admin';
      } else {
        return '/user';
      }
    }
  }
]

In the above example, when the user accesses the /user/:id path, it will be redirected based on the id in the parameter. value to determine the redirect target path. If id is admin, it will be redirected to /admin; otherwise, it will be redirected to /user.

3. Nested redirection

Vue Router also supports nested redirection, that is, after a page redirection, additional redirection is performed. The following is an example of nested redirection:

const routes = [
  { path: '/home', redirect: '/dashboard' },
  { path: '/dashboard', redirect: '/dashboard/overview' },
  { path: '/dashboard/overview', component: Overview },
]

In the above example, when the user accesses the /home path, he will first be redirected to /dashboard , and then be redirected to /dashboard/overview. The end user will see the contents of the Overview component.

4. Named route redirection

If we configure a name (name) for a route in the routing table, we can use the name directly when redirecting as the target path. Here is an example of using named route redirection:

const routes = [
  { path: '/user/:id', name: 'user', component: User },
  { path: '/userinfo/:id', redirect: { name: 'user' } },
]

In the above example, when the user accesses the /userinfo/:id path, it will redirect to the user named The route of is /user/:id.

Summary

Through the above introduction, we can see that Vue Router provides flexible and powerful redirection configuration functions. We can flexibly configure page jumps and navigation according to business needs through basic redirection, dynamic redirection, nested redirection, and named route redirection. I hope this article can help you with the redirection problems you encounter when developing with Vue Router.

Finally, a complete redirection example based on Vue Router is given:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/home', redirect: '/' },
  { path: '/user/:id', redirect: (to) => {
      const { id } = to.params;
      if (id === 'admin') {
        return '/admin';
      } else {
        return '/user';
      }
    }
  },
  { path: '/admin', component: Admin },
  { path: '/user', component: User },
  { path: '/dashboard', redirect: '/dashboard/overview' },
  { path: '/dashboard/overview', component: Overview },
  { path: '/userinfo/:id', redirect: { name: 'user' } },
]

const router = new VueRouter({
  routes
})

export default router

I hope that through the detailed introduction and sample code of this article, you will have a clearer understanding of Vue Router's redirection configuration. , and can be used flexibly in actual development.

The above is the detailed content of Detailed explanation of redirection configuration of Vue Router. For more information, please follow other related articles on the PHP Chinese website!