Vue routing parameter params and query

1. Routing parameters are divided into params to participate in query parameters

1. params

Params passing parameters is similar to post requests in network requests, the parameters passed by params will not be displayed in the address bar (but cannot be refreshed). params can only be used with name, if path is provided, params will be invalid.

2. query

Query passing parameters is similar to get requests in network requests, and the parameters passed by query will be spliced in the address bar (?name=xx). query is more flexible and can be used with path or name.

name is an alias for path when configuring routing, which is convenient to use. But it should be noted that "the path displayed in the address bar is always the value of path "

const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  }
]

The most important point of name is to cooperate with params for routing parameter passing. Let's look at an example: when we log in, we need to bring the user name to the home page for display. Of course, there are many methods such as localStorage, sessionStorag, central event bus bus, but we need to learn routing parameters here.

3. Method 1: pass parameters through params

Programmatically:

data:{
  username: ''
},
login() {
  ...
  this.$router.push({
    name: 'home', //注意使用 params 时一定不能使用 path
    params: { username: this.username },
  })
}

Declarative:

<router-link :to="{ name: 'home', params: { username: username } }">

Value:this.$route.params.username

4. Method 2: pass parameters through query

Programmatically:

data:{
  username: ''
},
login() {
  ...
  this.$router.push({
    path: '/home',
    query: { username: this.username },
  })
}

Declarative:

<router-link :to="{ path: '/home', query: { username: username } }">

Value:this.$route.query.username

After passing parameters in params, refreshing the page will lose the obtained parameters. So the routing parameters should be modified to '/login/:username'(officially called dynamic routing)

const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home/:username',
    name: '/home',
    component: Home
  }

But this will not be similar to the post request, he will replace the received parameters as the address.

If the incoming parameter is: params: { username: 'admin'}, then the final access address is: http://localhost:8080/home/admin

Summarize

From the login example, if the user name is not sensitive information, it can be directly placed in the address bar (using the query parameter)
Why not use params to pass parameters? Cannot be refreshed due to params passing parameters. Or meet the refresh requirements, but if you want to modify the address, the user name will also be displayed in the address bar
If the front-end request method is post, and the back-end HTTP request is @PostMapping, then @RequestBody should be written on the back-end parameters, and data should be written when the front-end passes parameters, because it is Json passing parameters. Because the parameters are placed in the request body when the post request uses data to pass parameters, so the specific parameters are not displayed on the address bar.
If the parameter is passed in the form of get and an object is passed, use params, which will finally disperse the content of your parameter to the question mark (?) behind your address bar, such as the address: http://localhost :8888/user/list/1/20?name=zhansan

Reference: Detailed explanation of Vue routing parameter passing (params and query)_coder_7's blog-CSDN blog_vue routing parameter passing query and params