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