The difference between params and query in Vue router

Time:2021-2-21

1. Different introduction methods

Query should be introduced with path

this.$router.push({
  path: 'test',
  query: {
    type: 2,
    Detail: 'ha ha'
  }
})

Params should be introduced with name

this.$router.push({
  name: 'test',
  query: {
    type: 2,
    Detail: 'ha ha'
  }
})

2. Different URLs

Query display parameters in URL

http://localhost : 8080 / detail? Type = 0 & detail = haha
Params does not display parameters in the URL

http://localhost:8080/detail

Let’s sort out the differences between the two

1. Pragmatic

As I said just now, query needs to be introduced with path and params needs to be introduced with name. The receiving parameters are similar. They are this$ route.query.name And this$ route.params.name .

Note that when receiving parameters, it is already $route instead of $router!!

2. On display

Query is more similar to get parameters in Ajax, and params is similar to post. To put it more simply, the former displays parameters in the browser address bar, while the latter does not

query:       

params:    

summary

The above is the difference between params and query in Vue router introduced by Xiaobian. I hope it can help you. If you have any questions, please leave me a message and Xiaobian will reply you in time. Thank you very much for your support to developer!
If you think this article is helpful to you, please reprint, please indicate the source, thank you!