Detailed explanation of two ways of routing parameters by vue-router (params and query)

1. Vue-router routing parameter transfer problem

1. Concept:

A. The usage scenarios of vue routing parameters are generally used inWhen the parent route jumps to the child route, it carries the parameter jump.
B. The transmission method can be divided intoparamsPassing the ginseng andqueryTransferencing;
C. And params can be divided intourlThere are two ways to display parameters and not display parameters;
D. That is, three ways to pass parameters by vue routing: query parameter (display parameters), params parameter (display parameters), params parameter (display parameters), params parameter (do not display parameters)

2. Common scenarios:

A. Click on the list details, jump to the details page, and pass the id parameter to obtain the details data.
B. After entering content in the input box, click Search, jump to the search page, and bring the entered content to the search page.

Method 1: query parameter transmission (display parameters)

query parameter transmission (display parameters) can be divided intoDeclarativeandProgrammingTwo ways

1. Declarative router-link

This method is also implemented through the to attribute of the router-link component. However, when passing values ​​using this method, the subroutine needs to configure the routing alias in advance.(name attribute),For example:

//Subrouting configuration{
  path: '/child,
  name: 'Child',
  component: Child
}
// Parent routing component<router-link :to="{name:'Child',query:{id:123}}">EnterChildrouting</router-link>

2. Programming this.$

When passing values ​​using this method, the subroutine also needs to configure the routing alias in advance.(name attribute),For example:

//Subrouting configuration{
  path: '/child,
  name: 'Child',
  component: Child
}
//The parent route program passes parameters (usually triggered by events)this.$({
    name:'Child',
    query:{
    	id:123
    }
})
Copy the code

Receive parameters: In the subroutine, you can obtain the passed parameter value through the following code.

this.$
( this.$ ) // { id:123 }
( this.$ ) // 123

Method 2: Params parameter transmission (display parameters)

Params parameter transmission (display parameters) can be divided intoDeclarativeandProgrammingTwo ways

1. Declarative router-link

This method is implemented through the to property of the router-link component, and the parameters of the method can be a string path or an object describing the address. When passing values ​​using this method,The subroutine needs to be configured in advance,For example:

//Subrouting configuration{
  path: '/child/:id',
  component: Child
}
// Parent routing component<router-link :to="/child/123">EnterChildrouting</router-link>

2. Programming this.$

When passing values ​​using this method, the subroutine also needs to configure parameters in advance, for example:

//Subrouting configuration{
  path: '/child/:id',
  component: Child
}
//The parent route program passes parameters (usually triggered by events)this.$({
    path:`/child/${id}`, // Template string form})

Receive parameters: In the subroutine, you can obtain the passed parameter value through the following code.

this.$
( this.$ ) // { id:123 }
( this.$ ) // 123

Method 3: Params parameter transmission (no parameters are displayed)

Params parameter transfer (no parameters are displayed) can also be divided into two ways: declarative and programming. The difference from the method is thatHere is the value transmitted through the alias name of the route

1. Declarative router-link

This method is also throughrouter-linkComponenttoAttribute implementation, for example:

<router-link :to="{name:'Child',params:{id:123}}">EnterChildrouting</router-link>

2. Programming this.$

When passing values ​​using this method, the subroutine also needs to configure the parameters in advance, but it cannot be used anymore.:/idTo pass parameters, because params are already used in the parent route to carry parameters, for example:

//Subrouting configuration{
  path: '/child,
  name: 'Child',
  component: Child
}
//The parent route program passes parameters (usually triggered by events)this.$({
    name:'Child',
    params:{
    	id:123
    }
})

Receive parameters: In the subroutine, you can obtain the passed parameter value through the following code.

this.$
( this.$ ) // { id:123 }
( this.$ ) // 123

2. The difference between params transmission and query transmission:

• 1. Use query to pass parameters, similar to get request; use params to pass parameters, similar to post request.
• The syntax of the parameter address written in path can also be used for parameter address written in name;The syntax of params must be used for the parameter transfer address written by name.
• Pass the display parameters and refresh the page, and the parameters are not lost; pass the params without displaying the parameters and refresh the page, and the parameters are lost; params are safer compared to query

The above is the detailed explanation of the two methods of vue-router routing parameters (params and query). For more information about vue-router routing parameters, please pay attention to my other related articles!