Vue路由传参params 与 query

一、路由传参分为 params 传参与 query 传参

1. params

params 传参类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中（但是不能刷新）。params 只能配合 name 使用，如果提供了 path，params 会失效。

2. query

query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用。

name 是配置路由时给 path 取的别名，方便使用。但要注意的是 “地址栏显示的路径始终是 path 的值”

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

name 最重要的一点就是配合 params 进行路由的参数传递。我们来看一个列子：当我们登录之后我们需要把用户名带到主页进行展示。当然方法有许多比如localStorage，sessionStorag，中央事件总线bus，但我们这里需要学习路由传参。

3. 方式一：通过 params 传参

编程式：

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

声明式：

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

取值：this.$route.params.username

4. 方式二：通过 query 传参

编程式：

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

声明式：

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

取值：this.$route.query.username

params 传参后，刷新页面会失去拿到的参数。所以路由参数要修改为 '/login/:username'（官方称为动态路由）

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

但是这样就不会类似于 post 请求，他会把接收到的参数替换作为地址。

假如传入参数为：params: { username: ‘admin’}，那么最终访问的地址为：http://localhost:8080/home/admin

总结

通过登录的例子来看，如果用户名不是敏感信息，可以直接放在地址栏中（使用query参数）
为什么不用params传参？由于 params 传参不能刷新。或满足刷新需求，但要对地址进行修改，用户名一样会显示在地址栏中
如果前端请求的方式是 post，并且后端的HTTP请求为 @PostMapping，那么后端的参数上面要写 @RequestBody ，而且前端传递参数的时候要写 data，因为是 Json 传参。因为用post请求使用data传参的时候，参数是放在请求体中的，所以地址栏上也不显示具体的参数。
如果是以get形式的传参，并且传的是一个对象，就用params，他会把你参数的内容最后分散到你地址栏后面的问号（？）后面，如地址是：http://localhost:8888/user/list/1/20?name=zhansan

参考：Vue路由传参详解（params 与 query）_coder_7的博客-CSDN博客_vue路由传参query和params

Vue路由传参params 与 query

一、路由传参分为 params 传参与 query 传参

总结

猜你喜欢