Vue Router使用router.push传参时出现undefined问题求助

问题原因 #

出现Discarded invalid param(s) "value"警告，是因为路由的path中未定义对应参数的占位符，Vue Router会将未在path中声明的params判定为无效参数并丢弃。另外组件模板里用this.value是多余的，模板内可直接访问props属性。

修复步骤 #

1. 修正路由配置 #

在路由的path中添加参数占位符:value，同时将props设为true，让Vue Router自动把路由params映射为组件的props：

const routes = [
    { 
        path: '/upload/:value', // 添加参数占位符:value
        name: 'upload-document', 
        props: true, // 自动将路由params转为组件props
        component: () => import('./../modules/doc_templates/pages/UploadDocPage.vue')
    }
]

2. 调整接收组件的模板 #

模板内无需使用this.，直接访问props即可：

<template>
    <div> 
        <p>value: {{ value }} </p>
    </div>
</template>

<script>
export default {
    props: {
        value: String
    }
}
</script>

可选：不暴露参数在URL中的方案 #

如果不想让参数显示在URL里，可改用query传递参数，无需修改路由path：

• 发起跳转的代码修改为：

this.$router.push({name: 'upload-document', query: {value: "example@email.com"}})

• 接收组件通过$route.query获取参数：

<template>
    <div> 
        <p>value: {{ $route.query.value }} </p>
    </div>
</template>

内容的提问来源于stack exchange，提问作者Daniel Nochess