query和params的区别是什么

query 和 params 是 Vue Router 中传递路由参数的两种不同方式。它们的主要区别在于 URL 结构和获取参数的方法。

1. params

params 是用来传递路由路径中的动态参数。这些参数在路由路径中以冒号 (:) 表示。

路由配置：

{
  path: '/interviewApplication/:backpackId',
  name: 'interviewApplication',
  component: InterviewApplicationComponent
}

跳转代码：

this.$router.push({
  name: 'interviewApplication',
  params: { backpackId: item.backpackId }
});

获取参数： 在 InterviewApplicationComponent 中，你可以通过 this.$route.params.backpackId 获取传递的参数。

URL 示例：

http://localhost:8080/interviewApplication/123

2. query

query 是用来传递查询参数，这些参数附加在 URL 路径的后面，格式类似于 URL 中的查询字符串。

路由配置：

{
  path: '/interviewApplication',
  name: 'interviewApplication',
  component: InterviewApplicationComponent
}

跳转代码：

this.$router.push({
  path: 'interviewApplication',
  query: { backpackId: item.backpackId }
});

获取参数： 在 InterviewApplicationComponent 中，你可以通过 this.$route.query.backpackId 获取传递的参数。

URL 示例：

http://localhost:8080/interviewApplication?backpackId=123

总结

• URL 结构：

  • params：参数作为路径的一部分。
  • query：参数作为查询字符串的一部分。

• 获取参数的方法：

  • params：通过 this.$route.params。
  • query：通过 this.$route.query。

• 使用场景：

  • 如果参数是资源的标识符并且应该是路径的一部分，使用 params。
  • 如果参数是可选的或用于过滤、排序等，使用 query。

根据具体需求选择合适的方式。