在 vue router 中，若路由配置未定义动态参数（如 `/record-modification/:id`），直接通过 `params` 传递数据将被忽略；此时应改用 `query` 进行传参，并通过 `$route.query` 获取，才能确保参数可靠传递。
你遇到的错误提示 Discarded invalid param(s) "recordIds", "datasources"，根本原因在于：params 仅在路由路径中声明了动态段（dynamic segments）时才生效。而你的目标路由配置为：
{
path: '/record-modification',
name: 'recordModification',
component: recordModification,
meta: { needAuthentication: true, needCaseId: true }
}该路径不含任何动态参数（例如 :id、:recordIds 等），因此 Vue Router 会静默丢弃所有 params 字段——这正是控制台警告的来源，且 this.$route.params 始终为空对象。
✅ 正确做法是改用 query 传参（类比 URL 中的查询字符串 ?recordIds=1,2&datasources=api,db）：
// 发起跳转（推荐：命名路由 + query）
this.$router.push({
name: 'recordModification',
query: {
recordIds: [101, 102, 103], // 支持数组、字符串、数字等可序列化值
datasources: ['user-api', 'auth-db']
}
})⚠️ 注意：query 中的值会自动进行 URL 编码，因此建议传入简单 JSON 可序列化类型（避免函数、Date 对象、undefined 等）。若需传递复杂对象，可先 JSON.stringify() 后再传入（接收端需 JSON.parse()）。
立即学习“前端免费学习笔记（深入）”；
在目标组件 recordModification.vue 中，通过以下方式安全读取：
export default {
computed: {
recordIds() {
const ids = this.$route.query.recordIds
return Array.isArray(ids)
? ids
: (typeof ids === 'string' ? ids.split(',').map(Number) : [])
},
datasources() {
return this.$route.query.datasources || []
}
},
watch: {
'$route.query': {
handler() {
// 当 query 变化时（如浏览器前进/后退），可触发重新加载逻辑
this.loadData()
},
immediate: true
}
}
}? 补充说明：
- 若你确实需要 params（例如 SEO 友好或语义化 URL），则必须修改路由配置，例如：
{ path: '/record-modification/:recordIds+', name: 'recordModification', ... }并配合 props: true 或函数式 props 解构，但该方式对数组/对象支持有限，且不适用于多维复杂数据。
- query 是更通用、灵活、调试友好的方案，适用于绝大多数场景（如筛选条件、分页、批量操作 ID 列表等）。
总结：无动态路径段 → 必用 query；有明确路径变量（如详情页 ID）→ 可选 params。切勿混用或误判机制。
