What is the difference between this.$route.params and this.$route.query in vue? (Problems encountered during development)

The main difference is one sentence: query: with parameters in the url; param: without parameters in the url

for example:

1. the this. $ Route.query use

A. Passing parameters:

this.$router.push({
         path: '/monitor',
         query:{
               id:id,
          }
}）

B. Get parameters:

this.$route.query.id

C. Form in url (with parameters in url)

http://172.19.186.224:8080/#/monitor?id=1

D. When using routing jumps to transfer parameters between pages, refresh the page that transfers parameters after the jump, and the data will also show that there is (this problem is encountered in the project)

2. the this. $ Route.params use

A. Passing parameters:

this.$router.push({
         name: 'monitor',
         params:{
               id:id,
          }
}）

B. Get parameters:

this.$route.params.id

C. Form in url (without parameters in url)

http://172.19.186.224:8080/#/monitor

D. When using routing jumps to transfer parameters between pages, refresh the page that transfers parameters after the jump, and the data does not exist (this problem is encountered in the project)