在 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。切勿混用或误判机制。