The difference between query and params for routing parameters in Vue

Routing configuration: {path: '/ login', name: 'Login', component: Login},

1. The page carries the query parameter jump (path, name specifies that you can carry the query parameter when jumping to Login)

this.$router.push({ path:'/login',name:'Login', query: { id: this.id } )

query is equivalent to sending a get request, the request parameters will be displayed in the browser address bar

2. The page carries params parameter jumps (only params can be specified when carrying params parameter jumps)

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

Params is equivalent to sending a post request, the request parameters will not be displayed, and the parameters will disappear after the page is refreshed

When the routing configuration is changed to

Routing configuration: {path: '/ login /: id', name: 'Login', component: Login}

And send the request again, the requested data will not disappear with the refresh of the page

 

Get request parameters

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

 

Note:

The router is an object of VueRouter. Through the Vue.use (VueRouter) and VueRouter constructors, a router instance object is obtained. This object is a global object. It contains all the routes and contains many key objects and attributes.

$ router.push ({path: 'login'}); The essence is to add a route to the history stack, in our opinion it is to switch routes, but the essence is to add a history record;

The route is a route object of the jump, each route will have a route object, is a local object, you can get the corresponding name, path, params, query, etc.

 

Guess you like

Origin www.cnblogs.com/shuaigebie/p/12717238.html