vue-router传参query和params有什么区别？

Vue Router 传参：Query 和 Params 的区别

在 Vue.js 的路由管理中，vue-router 是一个非常重要的工具。它允许我们在不同的视图之间导航，并且提供了多种方式来传递参数。最常用的两种方式是 query 和 params。尽管它们看似相似，但在使用上有着明显的区别。

一、基本概念

1. Query：

   • Query 参数是 URL 中的查询字符串部分，通常用于传递可选参数。
   • 语法格式为 ?key1=value1&key2=value2。
   • 在路由中，可以在访问路径后附加查询字符串。

2. Params：

   • Params 参数是 URL 路径的一部分，通常用于传递必需的参数。
   • 语法格式为 /user/:id，其中 :id 是一个动态参数。
   • 在路由中，params 参数在定义路由时就已指定。

二、使用示例

1. 使用 Query 传参

在 Vue Router 中，我们可以通过 this.$router.push 或 this.$route.query 来传递和获取 Query 参数。例如：

// 路由定义
const routes = [
  { path: '/user', component: User }
];

// 跳转时传递 Query 参数
this.$router.push({ path: '/user', query: { id: 123 } });

// 在 User 组件中获取 Query 参数
mounted() {
  console.log(this.$route.query.id); // 输出 123
}

2. 使用 Params 传参

Params 参数在路由定义时就已经指定。例如：

// 路由定义
const routes = [
  { path: '/user/:id', component: User }
];

// 跳转时传递 Params 参数
this.$router.push({ path: '/user/123' });

// 在 User 组件中获取 Params 参数
mounted() {
  console.log(this.$route.params.id); // 输出 123
}

三、区别总结

1. 参数位置：

   • Query 参数位于 URL 的查询字符串部分，通常以 ? 开头。
   • Params 参数是 URL 路径的一部分，通常以 : 开头。

2. 可选性：

   • Query 参数是可选的，通常用于传递附加信息。
   • Params 参数是必需的，通常用于表示资源的唯一标识。

3. 路由定义：

   • Query 参数不需要在路由定义中声明，可以随时添加。
   • Params 参数必须在路由定义时声明，且其路径必须匹配。

4. 获取方式：

   • Query 参数通过 this.$route.query 访问。
   • Params 参数通过 this.$route.params 访问。

四、使用场景

• Query 参数：

  • 适用于过滤、排序、分页等可选参数传递。例如，在一个文章列表页面中，可以使用 Query 参数来传递当前页码和排序方式。

• Params 参数：

  • 适用于获取特定资源的详细信息，通常用于 RESTful APIs。例如，在用户详情页面中，使用 Params 参数来传递用户 ID。

五、总结

在 Vue Router 中，query 和 params 是两种不同的传参方式。理解它们的区别有助于我们更合理地设计路由和参数传递。选择合适的方式，可以让我们的应用在用户体验和代码结构上都更为清晰。