Vue 中 params 和 query 的区别？

在 Vue Router 中，params 和 query 都是用来传递路由参数的方式，但它们有着不同的作用和用法。

Params：

• params 是路由路径中的一部分，用于捕获动态片段。在路由定义中，使用 : 来标记动态路径参数。
• 它是通过路由路径中的占位符来传递参数的，例如 /user/:id 中的 :id 就是一个参数。这种方式适合传递那些在路由中体现为路径一部分的参数，比如用户 ID、文章 ID 等。
• 在组件中通过 $route.params 来访问这些参数。

示例：

// 路由定义
{ path: '/user/:id', component: User }

// 组件中访问参数
this.$route.params.id

Query：

• query 是路由的查询参数，是 URL 中 ? 后面的参数部分，形式为 key=value。
• 它适合传递一些不影响路由匹配，但需要在不同页面间共享的参数，比如搜索关键词、过滤条件等。
• 在组件中通过 $route.query 来访问这些参数。

示例：

// 路由定义
{ path: '/search', component: Search }

// 组件中访问参数
this.$route.query.keyword

区别总结：

• params 是路由路径中的一部分，用于捕获动态片段，通常用于标识资源唯一性。
• query 是作为 URL 参数的一部分，用于传递一些不影响路由匹配的参数，比如搜索关键词、过滤条件等。
• params 对应的参数会被编码进路由路径中，而 query 的参数则是以键值对的形式出现在 URL 中。

根据你的需求和场景，可以选择使用 params 或 query 作为路由参数的传递方式。