Vue路由传参异常：recordIds、datasources参数被丢弃，目标页面参数为空

问题原因 #

你遇到的报错核心原因是路由配置的path中未声明对应的params参数占位符，Vue Router会将这些未提前声明的参数判定为无效项并直接丢弃。另外补充一点：就算声明了占位符，params也仅适合传递字符串、数字这类简单数据，像recordIds（大概率是数组）、datasources（可能是对象/数组）这种复杂类型，用params传递不仅会出现序列化异常，页面刷新后params还会丢失。

解决方案 #

方案1：改用query传递（推荐，支持复杂数据，刷新不丢失）

修改跳转代码，将params替换为query，复杂数据先转为JSON字符串：

this.$router.push({
     name: 'recordModification',
     query: {
         recordIds: JSON.stringify(recordIds),
         datasources: JSON.stringify(datasources)
     }
});

目标页面获取时解析JSON：

const recordIds = JSON.parse(this.$route.query.recordIds);
const datasources = JSON.parse(this.$route.query.datasources);

方案2：在路由path中声明params占位符（仅适合简单数据）

如果一定要用params传递，需先在路由配置的path里添加参数占位符：

{
   path: '/record-modification/:recordIds/:datasources',
   name: 'recordModification',
   component: recordModification,
   meta: { needAuthentication: true, needCaseId: true }
}

注意：这种方式仅支持传递字符串，数组/对象需先转为字符串，且参数会暴露在URL中，刷新后参数保留，但复杂数据转字符串放在URL里体验较差。

方案3：用状态管理存储参数（适合敏感/复杂数据，无URL暴露）

若不想把参数暴露在URL中，可以用Vuex或Pinia存储参数：

// 以Vuex为例，跳转前将参数存入状态
this.$store.commit('SET_RECORD_PARAMS', { recordIds, datasources });
this.$router.push({ name: 'recordModification' });

目标页面从状态管理中读取：

const { recordIds, datasources } = this.$store.state.recordParams;

内容的提问来源于stack exchange，提问作者Amit K.