用vue写的多组件的表格增删改查，接收到的数据无法渲染

1.首先路由没有问题，

2.在about基本页里


<el-button type="primary" style="margin-left: 6px" @click="add"
      >添加</el-button
    >

 add() {
      this.$router.push({ name: "Home" });
    },

添加并跳转到弹窗页Home，

 created() {
    console.log(this.$route.query.date); //6
  },
打印看下弹窗页的日期，我输入的就是六没错

3.在弹窗页里

1.一开始值为空
 ruleForm: {
        date: "",
        name: "",
        address: "",
      },

2.提交时若验证通过就跳转并用query传值
 submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
       
          this.$router.push({
            name: "About",
            query: {
              date: this.ruleForm.date,
              name: this.ruleForm.name,
              address: this.ruleForm.address,
            },
          });
          console.log(this.ruleForm.address);
        }

4.最后在about里接收数据

 mounted(){
     this.date = this.$route.query.date
     this.name= this.$route.query.name
     this.address= this.$route.query.address
 }

表格数据是写死到data里的，不知道怎末在模板里接收