Vue Router's params and query parameter passing and using the difference

vue page jump two ways are: name and path

this.$router.push({name: 'HelloWorld2})

this.$router.push({path: '/hello-world1'})

 

There are two ways to pass parameters are: params and query

this.$router.push({name: 'HelloWorld2', params:{id:1}})

this.$router.push({path: '/hello-world2', query:{id:2}})

Zhang put the following chart to show the relationship between the path and the parameters

in conclusion: 

Jump can use the name query and pass parameters params

When the name and corresponding query can jump and mass participation, but can not add routing behind the parameter name, or become blank page

Jump can only use the path with query parameter passing

If a path corresponding to the data transmission is not the last params

Use the query parameter passing with the address bar? Stitching together, similar to Ajax in the get request

{
path: '/hello-world',
name: 'HelloWorld2',
component: HelloWorld2
}

 This is done using query parameter passing the address bar:? Hello-world id = 2

Use params parameter passing time to add the parameter name followed by routing (if not the parameter name can also pass parameters, but a page refresh parameter is lost), and parameter passing time, keep up the routing parameters Parameter name behind setting the corresponding name. Use query method, there is no such limitation, direct jump can be used inside

{
path: '/hello-world/:id',
name: 'HelloWorld2',
component: HelloWorld2
}

This is done using params parameter passing the address bar: hello-world / 2 

We talked about how parameter passing parameters to accept it? 

params accept parameters and query very similar

this.$route.params.id,
this.$route.query.id,

 Note the use here is not the route router!

Come under supplementary use

<router-link> corresponding to the path name and how to pass parameters
to look index.js wording

{
path: '/my-order/:state',
name: 'my-order',
component: MyOrder,
}

path parameter passing:

<router-link: to = " {path: '/ select-address / 0'}"> </ router-link>
See, directly corresponding to the time jump in the address bar to splicing parameters,

name parameter passing:

<router-link: to = " {name: 'my-order', params: {state: 0}"> </ router-link>
using the name parameter passing splicing operation can not be performed when the address bar, the need to write the corresponding parameter name

Accept parameters are the same with the above