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
。
- 如果参数是资源的标识符并且应该是路径的一部分,使用
根据具体需求选择合适的方式。