The difference between Vue routing parameter query and params

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

1. The page carries the query parameter jump (path, name can carry the query parameter when the specified jump 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 the params parameter jump (when carrying the params parameter jump, only the name can be used)

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

params is equivalent to sending a post request, the request parameters in the url will not be displayed, and the parameters will disappear after refreshing the page

When the routing configuration is changed to: {path:'/login/:id',name:'Login',component:Login} and the request is sent again, the request data will not disappear with the page refresh. Get the request parameter this. route. params. idthis. route.params.id this.route.params.idthis.route.query.id

Note:

A router is an object of VueRouter. A router instance object is obtained through Vue.use(VueRouter) and VueRouter constructor. This object is a global object, which contains all 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 view it is to switch the route, but the essence is to add a history record;

The route is a redirected route object, and each route will have a route object, which is a partial object, which can obtain the corresponding name, path, params, query, etc.

Guess you like

Origin blog.csdn.net/weixin_45895806/article/details/110958011
Recommended