Vue 路由参数 query 和 params 的区别，以及 query 传递对象的坑

前端

2023-10-07 21:52:15

了解 Vue 路由参数 query 和 params 的区别是至关重要的，这样才能正确地传递数据，避免遇到意外的坑。现在，我们就来一探究竟。

1. query 和 params 的异同

query 和 params 都是 Vue 路由中用于传递数据的参数，两者之间既有区别，也有共同之处。

共同点：

都是通过 URL 传递数据。
都可以在组件中通过 this.$route 对象访问。

区别：

query 是查询字符串的一部分，而 params 是路由路径的一部分。
query 使用 ? 符号分隔键值对，而 params 使用 / 符号分隔键值对。
query 可以传递任何类型的数据，而 params 只可以传递字符串类型的数据。
query 可以通过 this.$route.query 对象访问，而 params 可以通过 this.$route.params 对象访问。

2. query 传递对象的坑

query 可以传递任何类型的数据，包括对象。但是，在传递对象时需要注意以下几点：

对象必须是一个字符串化的 JSON 对象。
在组件中访问对象时，需要使用 JSON.parse() 方法将其解析为 JavaScript 对象。

举个例子：

// 在路由中传递对象
this.$router.push({
  path: '/user',
  query: {
    user: JSON.stringify({
      name: 'John Doe',
      age: 30
    })
  }
})

// 在组件中访问对象
const user = JSON.parse(this.$route.query.user)

console.log(user.name) // 'John Doe'
console.log(user.age) // 30

如果忘记使用 JSON.parse() 方法解析对象，就会得到一个字符串，而不是 JavaScript 对象。这可能会导致意料之外的结果。

3. 小结

query 和 params 是 Vue 路由中用于传递数据的参数，两者之间既有区别，也有共同之处。query 是查询字符串的一部分，而 params 是路由路径的一部分。query 可以传递任何类型的数据，而 params 只可以传递字符串类型的数据。query 可以通过 this.$route.query 对象访问，而 params 可以通过 this.$route.params 对象访问。

在使用 query 传递对象时，需要注意以下几点：