VUE页面间传值为null

今天写代码的时候发现我的参数出现了问题导致开发停滞
首先，我初始化后通过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

      prop="singerId" label="singerId" align="center" width="120">
      prop="id" label="ID" align="center" width="120">

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

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

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这篇文章：VUE 页面缓存与不需要缓存的页面处理 也许能够解决你的问题，你可以看下

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^