Vue Router传递Song对象至编辑表单时参数为undefined的问题

尝试给Song对象添加编辑按钮，将数据传递到编辑表单实现预填，但始终获取到undefined，相关代码如下：

Song组件代码 #

<template>
  <div class="hello">
    <h1>{{ song.name }}</h1>
    <p>Author: {{ song.author }}</p>
    <p>Views: {{ song.views }}</p>
    <!-- <button @click="$router.push('/update-song?id=' + song.id )">Update</button> -->
    <button @click="$router.push({path: '/update-song', Component: UpdateSong, props: {song: song}})">Update</button>
  </div>
</template>

<script>
export default {
  name: 'Song',
  props: {
    song: Object
  }
}
</script>

编辑视图代码 #

<template>
    <div>
        <p>Update a song: {{this.author}} - {{this.name}}</p>
        <input type="text" id="name" placeholder="Name" v-model="name"/><br/>
        <input type="text" id="author" placeholder="Author" v-model="author"/><br/>
        <input type="text" id="country" placeholder="Country" v-model="country"/><br/>
        <input type="text" id="duration" placeholder="Duration" v-model="duration"/><br/>
        <input type="text" id="views" placeholder="Views" v-model="views"/><br/>
        <input type="text" id="genre" placeholder="Genre" v-model="genre"/><br/>
        <button @click="updateSong">Update Song</button>
    </div>
</template>

<script>
export default{
    name: 'UpdateSong',
    props: {
        song: Object
    },
    mounted() { 
         console.log(this.song) //undefined
     },
    data(){
        return{
            name: '',
            author: '',
            country: '',
            duration: 0,
            views: 0,
            genre: ''
        }
    },
    methods: {
        updateSong(){...}
    }
}
</script>

路由配置代码 #

const routes = [...,
    {
        path: '/update-song',
        name: "updateSong",
        component: UpdateSong
    }
]

问题原因 #

1. 路由跳转参数错误：$router.push中使用了错误的字段名Component（应为小写component，但实际路由跳转不需要手动指定组件），且直接传递props的方式不生效，未配合路由配置的props规则。
2. 路由未开启props传递：当前路由配置未设置props选项，组件无法接收路由传递的参数作为props。
3. 未同步props到组件data：即使props传递成功，编辑组件的data字段均为初始值，未从song props中赋值，无法实现表单预填。

解决方案 #

步骤1：修正路由跳转代码 #

改用路由name跳转，并通过params传递数据：

<button @click="$router.push({name: 'updateSong', params: {song: song}})">Update</button>

步骤2：修改路由配置，开启props传递 #

在路由中添加props: true，允许将params参数作为props传递给组件：

const routes = [...,
    {
        path: '/update-song',
        name: "updateSong",
        component: UpdateSong,
        props: true // 开启路由props传递
    }
]

步骤3：同步props到组件data #

在编辑组件的mounted钩子中，将song props的数据赋值给data字段，实现表单预填：

<script>
export default{
    name: 'UpdateSong',
    props: {
        song: {
            type: Object,
            required: true // 添加必填校验
        }
    },
    mounted() { 
        // 同步props数据到data
        this.name = this.song.name || '';
        this.author = this.song.author || '';
        this.country = this.song.country || '';
        this.duration = this.song.duration || 0;
        this.views = this.song.views || 0;
        this.genre = this.song.genre || '';
        console.log(this.song); // 现在可正常获取数据
    },
    data(){
        return{
            name: '',
            author: '',
            country: '',
            duration: 0,
            views: 0,
            genre: ''
        }
    },
    methods: {
        updateSong(){...}
    }
}
</script>

可选优化（避免刷新丢失数据） #

如果担心页面刷新后params中的对象丢失，可改为传递歌曲ID，再通过接口获取完整数据：

1. Song组件跳转代码：

<button @click="$router.push({name: 'updateSong', params: {id: song.id}})">Update</button>

2. 路由配置：

const routes = [...,
    {
        path: '/update-song/:id', // 动态路由参数
        name: "updateSong",
        component: UpdateSong,
        props: true
    }
]

3. 编辑组件获取数据：

mounted() { 
    // 调用接口获取歌曲详情
    getSongById(this.id).then(res => {
        const song = res.data;
        this.name = song.name || '';
        this.author = song.author || '';
        // 其他字段赋值
    })
},
props: {
    id: {
        type: [String, Number],
        required: true
    }
}

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