返回

深入剖析params和query传参之异同

前端

前言

在前端开发中，我们经常需要在组件之间传递数据。这时，我们就需要用到路由传参。路由传参是指在路由路径中传递数据。在Vue.js中，我们可以通过params和query两种方式来传参。

params传参

params传参是通过在路由路径中添加一个冒号(:)，然后跟上参数名称的方式来实现的。例如，以下路由路径表示在组件之间传递了一个名为id的参数：

/user/:id

当我们访问这个路由路径时，我们可以通过this.$route.params.id来获取这个参数的值。例如，以下代码表示在组件中获取id参数的值：

this.$route.params.id

query传参

query传参是通过在路由路径中添加一个问号(?)，然后跟上参数名称和参数值的方式来实现的。例如，以下路由路径表示在组件之间传递了一个名为code的参数，其值为123：

/user?code=123

当我们访问这个路由路径时，我们可以通过this.$route.query.code来获取这个参数的值。例如，以下代码表示在组件中获取code参数的值：

this.$route.query.code

params传参和query传参的区别

params传参和query传参的区别在于：

  • params传参是通过在路由路径中添加一个冒号(:)，然后跟上参数名称的方式来实现的，而query传参是通过在路由路径中添加一个问号(?)，然后跟上参数名称和参数值的方式来实现的。
  • params传参的参数值存储在this.route.params对象中，而query传参的参数值存储在this.route.query对象中。
  • params传参的参数值可以是任意类型，而query传参的参数值只能是字符串类型。
  • params传参的参数值在地址栏中不会显示，而query传参的参数值在地址栏中会显示。

params传参和query传参的适用场景

params传参和query传参都有各自的适用场景。一般来说，params传参适用于以下场景：

  • 需要在组件之间传递少量的数据。
  • 需要在组件之间传递复杂的数据类型的数据。
  • 不需要在地址栏中显示参数值。

query传参适用于以下场景：

  • 需要在组件之间传递大量的数据。
  • 需要在组件之间传递简单的数据类型的数据。
  • 需要在地址栏中显示参数值。

总结

params传参和query传参是Vue.js中两种常用的路由传参方式。它们各有其优缺点，我们可以根据实际需要选择合适的传参方式。

参考文献