vue3中query和params传值的区别

Vue 3 中 Query 和 Params 传值的区别

在 Vue 3 应用中，我们经常需要在组件之间传递数据。特别是在使用 Vue Router 时，query 和 params 是两种常见的传值方式。尽管它们都可以用来传递参数，但它们的使用场景和表现行为有所不同。以下是它们的详细对比：

一、Query 参数

1. 定义：

   • query 参数附加在 URL 的问号（?）后面，以键值对的形式存在，多个键值对之间用 & 连接。

2. URL 格式：

   http://example.com/path?key1=value1&key2=value2

3. 用法：

   • 在声明路由时，不需要特别配置 query 参数。
   • 使用 this.$router.push 或 useRouter().push 方法时，可以通过 query 选项来传递参数。

4. 示例代码：

   // 使用 Composition API import { useRouter } from 'vue-router'; setup() { const router = useRouter(); function navigateWithQuery() { router.push({ path: '/somePath', query: { foo: 'bar', baz: 'qux' } }); } return { navigateWithQuery }; }

5. 获取：

   • 在目标组件中，通过 this.$route.query 或 useRoute().query 来访问这些参数。

6. 适用场景：

   • 用于非敏感数据的传递，如分页信息、筛选条件等。
   • 适合需要用户分享链接并保留查询条件的场景。

二、Params 参数

1. 定义：

   • params 参数是动态段的一部分，通常用于指定资源的唯一标识符（如 ID）。

2. URL 格式：

   http://example.com/path/value1/value2

   或者带有静态路径部分：

   http://example.com/user/:id/profile

3. 用法：

   • 在声明路由时，需要在路径中使用占位符（如 :id）来指定 params 参数。
   • 使用 this.$router.push 或 useRouter().push 方法时，需要通过 params 选项来传递参数，并且必须指定 name 而不是 path。

4. 示例代码：

   // 路由配置 (router/index.js) { path: '/user/:id', name: 'User', component: UserComponent, } // 使用 Composition API import { useRouter } from 'vue-router'; setup() { const router = useRouter(); function navigateWithParams() { router.push({ name: 'User', params: { id: 123 } }); } return { navigateWithParams }; }

5. 获取：

   • 在目标组件中，通过 this.$route.params 或 useRoute().params 来访问这些参数。

6. 适用场景：

   • 用于指定资源或实体的唯一标识，如用户 ID、文章 ID 等。
   • 不适合在 URL 中暴露过多细节，因为 params 参数的值会直接影响 URL 结构。

三、总结

• Query 参数：适用于附加的、可选的信息传递，不会改变 URL 的基本结构。
• Params 参数：用于指定资源的唯一性，是 URL 结构的一部分。

选择哪种方式取决于你的具体需求和数据敏感性。希望这篇文章能帮助你更好地理解 Vue 3 中的 query 和 params 传值方式！