VUE页面间传值为null

Question

今天写代码的时候发现我的参数出现了问题导致开发停滞
首先，我初始化后通过query取到了singerId和singerName的值

data() {
    return {
          singerId:'',
          singerName:'',
          }
}
  created() {
    this.singerId=this.$route.query.id;
    this.singerName=this.$route.query.name;
    console.log(this.singerId,this.singerName);
    this.getData();
  },

然后我通过el-dialog向我的数据库中添加歌曲

<el-dialog title="添加歌曲" v-model="centerDialogVisible">
      <el-form id="add-song"
               label-width="120px"
               :model="registerForm"
      >
        <el-form-item label="歌曲名">
          <el-input type="text" name="name" v-model="registerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="专辑">
          <el-input type="text" name="introduction" v-model="registerForm.introduction"></el-input>
        </el-form-item>
        <el-form-item label="歌词">
          <el-input type="textarea" name="lyric" v-model="registerForm.lyric"></el-input>
        </el-form-item>
        <el-form-item label="歌曲上传">
          <input type="file"
                 name="song" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSong">确 定</el-button>
      </span>
      </template>
    </el-dialog>

这里可以看到我歌曲的id是5，歌手的id是1

      <el-table-column prop="singerId" label="singerId" align="center" width="120"></el-table-column>
      <el-table-column prop="id" label="ID" align="center" width="120"></el-table-column>

但从页面中可以发现我的singerID覆盖掉了id的值，而它自己却是一个空的值
向请教一下是哪里出了问题

Answer 1

调试输出一下完整的歌曲列表