current position:Home>Vue router redirection and alias

Vue router redirection and alias

2022-04-29 18:25:01Rookie_ Xiao Ka kumou

Redirect

Illustrate with examples : Redirection refers to when a user accesses /home when ,URL Will be / Replace , Then match it to /.

Redirection is also through routes Configure to complete , The following example is from /home Redirect to /

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

The target of redirection can also be a named route :

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

It can also be a way , Dynamic return redirection target :

const routes = [
  {
    
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
    
      //  Method receives the destination route as a parameter 
      // return  Redirected string path / Path object 
      return {
     path: '/search', query: {
     q: to.params.searchText } }
    },
  },
  {
    
    path: '/search',
    // ...
  },
]

Alias

take / An alias for /home, It means when a user accesses /home when ,URL Still /home, But it will be matched as the user is accessing /.

const routes = [{
     path: '/', component: Homepage, alias: '/home' }]

By alias , Be free to UI Structure maps to a Any of the URL, and Not limited by the nested structure of the configuration . Make alias / start , Make a nested path Absolute path . You can even combine the two , Provide multiple aliases with an array

const routes = [
  {
    
    path: '/users',
    component: UsersLayout,
    children: [
      //  For this  3  individual  URL  present  UserList
      // - /users
      // - /users/list
      // - /people
      {
     path: '', component: UserList, alias: ['/people', 'list'] },
    ],
  },
]

/people Is the way of writing absolute path , That is, it can be directly through /people To visit .
list Is the way to write relative paths , namely url Will splice the parent's path → /users/list.

Be careful : If the route has parameters , Be sure to include them in any absolute aliases :

const routes = [
  {
    
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      //  For this  3  individual  URL  present  UserDetails
      // - /users/24
      // - /users/24/profile
      // - /24
      {
     path: 'profile', component: UserDetails, alias: ['/:id', ''] },
    ],
  },
]

copyright notice
author[Rookie_ Xiao Ka kumou],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204291824581582.html

Random recommended