在 vue router 中，若通过 `params` 传递参数但目标路由未配置动态段（如 `/record-modification/:id`），参数将被丢弃；应改用 `query` 实现 url 查询参数传递，并通过 `$route.query` 访问。
Vue Router 提供了两种主流的参数传递方式：params（路径参数）和 query（查询参数），二者行为和适用场景截然不同。
✅ params 仅在声明式路由匹配时生效
params 要求路由路径中显式定义动态段（如 /record-modification/:id），且必须通过命名路由 + params 跳转，且不能脱离路径上下文独立存在。你当前的路由配置为静态路径：
{ path: '/record-modification', name: 'recordModification', component: recordModification }该路径不含任何动态段（如 :recordIds 或 :datasources），因此即使你在 this.$router.push({ name: 'recordModification', params: {...} }) 中传入 params，Vue Router 也会静默丢弃这些参数——这正是控制台报错 Discarded invalid param(s) 的根本原因。
✅ 推荐方案：改用 query 传递结构化数据
query 对应 URL 中的查询字符串（如 ?recordIds=1,2,3&datasources=api,db），无需修改路由路径，兼容性高，且支持序列化数组、对象（经 JSON.stringify 处理后）等复杂类型：
立即学习“前端免费学习笔记（深入）”；
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
// 发起跳转（发送端）
this.$router.push({
name: 'recordModification',
query: {
recordIds: [101, 102, 103], // ✅ 数组可直接传递
datasources: ['mysql', 'elasticsearch'] // ✅ 字符串数组也支持
}
});在目标组件 recordModification.vue 中，通过 $route.query 获取：
// 接收端（recordModification.vue）
export default {
mounted() {
const { recordIds, datasources } = this.$route.query;
console.log(recordIds); // "101,102,103"（注意：默认为字符串！）
console.log(datasources); // "mysql,elasticsearch"
// 若需还原为数组，建议在跳转前 JSON 序列化，或接收后解析：
const parsedRecordIds = JSON.parse(recordIds || '[]');
const parsedDatasources = JSON.parse(datasources || '[]');
}
}⚠️ 重要注意事项
- query 中的值始终为字符串类型，传递数组/对象时需手动 JSON.stringify() 和 JSON.parse()，否则会丢失类型信息；
- 避免在 query 中传递敏感数据（如 token、密钥），因其会暴露在 URL 和浏览器历史中；
- 若需强类型、高安全性或 SEO 友好路径，应重构路由为带动态段的 params 模式（例如 path: '/record-modification/:recordIds'），但需确保参数可安全编码进路径且长度可控；
- 使用 Vue Router 4（Vue 3）时，this.$route 已替换为 useRoute() 组合式 API，访问方式为：
import { useRoute } from 'vue-router' const route = useRoute() console.log(route.query.recordIds)
总结：当路由路径无动态段时，params 不可用；query 是最简洁、通用的跨路由传参方案，只需统一收发两端使用 $route.query 即可可靠获取数据。
