Vue路由新标签页传参时提示缺少必填参数data的问题

错误原因 #

你的路由配置/bill/:data定义了必填的路径动态参数（params），但打开新标签页时用query传递参数，导致路由解析时无法填充路径中的:data占位符，因此触发必填参数缺失的报错。

解决方案 #

方案1：用params传递参数（匹配路由配置） #

修改打开新标签页的代码，将query替换为params，让参数填充到路径的动态占位符中：

const routeData = this.$router.resolve({name: 'bill', params: {data: "TESTDATA123"}});
window.open(routeData.href, '_blank');

此时生成的URL为/bill/TESTDATA123，原有的this.$route.params['data']可以正常获取参数值。

方案2：改用query传参（修改路由配置） #

如果希望保留query传参的方式，需要修改路由配置，移除路径中的动态参数占位符：

{
    path: '/bill',
    name: 'bill',
    component: Bill,
    meta:{public: true}
}

同时修改参数获取代码，从query中读取：

console.log('params '+ this.$route.query['data'])

两种方案对比 #

• 方案1的参数嵌入URL路径，适合标识唯一资源的场景（如详情页ID）
• 方案2的参数以?data=xxx形式附加在URL末尾，适合非核心的可选参数

内容的提问来源于stack exchange，提问作者Wanjala Alex