vue路由query和params区别

Vue 路由 query 和 params 区别

在 Vue 路由中，query 和 params 是两种常用的传参方式。它们都可以用来实现路由间的参数传递，但其使用方式和作用有一些差异。

1. query 参数

query 参数是以键值对的形式出现在 URL 中的，也就是说参数会暴露在 URL 地址上。例如：

http://example.comparam1=value1&param2=value2

在 Vue 中，我们可以通过 $route 对象的 query 属性来获取当前路由中的 query 参数。例如：

this.$route.query.param1

query 参数具有以下特点：

• 参数出现在 URL 中，可见且可编辑。
• 参数可以是任意类型的数据，包括字符串、数字、对象等。
• 参数可以传递多个，每个参数之间使用 & 进行分隔。
• 参数可以在同一页面的不同路由之间进行传递。

query 参数适合于以下场景：

• 需要在 URL 中直接显示参数的值，比如分享链接。
• 参数是可选的，不影响页面渲染和功能实现。
• 参数需要在多个路由之间传递。

2. params 参数

params 参数是以占位符的形式出现在 URL 中的，参数不会直接暴露在 URL 地址上。例如：

http://example.com/user/:userId

在 Vue 中，我们可以通过 $route 对象的 params 属性来获取当前路由中的 params 参数。例如：

this.$route.params.userId

params 参数具有以下特点：

• 参数出现在 URL 中的占位符中，不可见且不可编辑。
• 参数通常是字符串类型的数据。
• 每个路由只能传递一个 params 参数。
• 参数只能在父子路由之间进行传递。

params 参数适合于以下场景：

• 参数需要在路径中保持一致，比如用户详情页。
• 参数是必须的，影响页面渲染和功能实现。
• 参数只需要在父子路由之间传递。

3. params 和 query 的比较

params 和 query 在使用方式和传参方式上有一些明显的差异：

• params 是通过占位符传递参数，而 query 是通过 URL 的键值对传递参数。
• params 的参数通常是字符串类型，而 query 的参数可以是任意类型。
• params 在父子路由之间传递，query 可以在同一页面的不同路由之间传递。
• params 在 URL 中不可见且不可编辑，query 参数出现在 URL 中可见且可编辑。
• 每个路由只能传递一个 params 参数，但可以传递多个 query 参数。

根据具体的需求和场景，我们可以选择合适的方式来传递参数。当需要在 URL 中显示参数或者参数需要在多个路由之间传递时，可以使用 query 参数；当参数需要在路径中保持一致或者只需要在父子路由之间传递时，可以使用 params 参数。

总结起来，query 和 params 是用于实现路由参数传递的两种常用方式，它们在使用方式和特点上有一些差异，开发者可以根据具体需求选择合适的方式来使用。