Vue.js 如何防止使用vue、vue recaptcha和axios重新加载页面？

当涉及到vue和一般的编码时，我真的很生疏。我有一个正在进行的小项目，它需要一个表单在后端与python对话。我有后端处理敲打木材，但前端正在成为一个痛苦。本质上，我想显示一个vue引导模式，通知用户他们已收到一封验证电子邮件（现在在后端工作），所有内容都在后端工作。但是，在使用axios进行第二次回调后，页面将重新呈现并显示模式几秒钟，然后重新加载页面。我想避免页面一起重新加载。 我花了大约3天的时间试图弄明白这一点。我已经尝试了无数的配置，以至于我无法了解我所做的更改。这是我目前拥有的代码，任何帮助都将不胜感激

//Vue.config.productionTip=false
新Vue({
el:“#应用程序”，
组成部分：{
“vue recaptcha”：VueRecaptcha
},
方法：{
提交测试：函数（）{
//禁用“提交”按钮，以便用户不会多次点击“提交”
this.status=“正在提交”
const self=this
axios.post（“http://127.0.0.1:5000/data_privacy_request“，json_有效负载）
。然后（（响应）=>{
self.successfulserverresponse=true
}).catch（（错误）=>{
self.serverError=getErrorMessage（err）
//帮助器，以向用户获取可显示的消息
函数getErrorMessage（err）{
让我来回应一下
responseBody=err.response
if（！responseBody）{
responseBody=err
}否则{
responseBody=err.response.data | | responseBody
}
返回responseBody.message | | JSON.stringify（responseBody）
}
}).然后（（）=>{
self.status=“”
})
},
提交：函数（）{
如果（this.delete|data | this.access|u my|u data | this.unsubscribe | this.data | u use | this.not| u sell）{
this.noTypeOfRequest=false
这是。$refs.recaptcha.execute（）
}否则{
this.noTypeOfRequest=true
}
},
OnCaptChaverifyed:函数（recaptchaToken）{
//禁用“提交”按钮，以便用户不会多次点击“提交”
this.status=“正在提交”
这是。$refs.recaptcha.reset（）
const self=this
axios.post（“http://127.0.0.1:5000/recaptcha_verify", {
“recaptchaToken”：recaptchaToken
})
。然后（（响应）=>{
self.recaptchaServerResponse=response.data.message
//处理请求
if（self.recaptchaServerResponse==“成功”）{
self.processRequest（）
}
}).catch（（错误）=>{
self.serverError=getErrorMessage（err）
//帮助器，以向用户获取可显示的消息
函数getErrorMessage（err）{
让我们一起来回应；
responseBody=err.response；
if（！responseBody）{
responseBody=err；
}否则{
responseBody=err.response.data | | responseBody；
}
返回responseBody.message | | JSON.stringify（responseBody）；
}
})
},
onCaptchaExpired:function（）{
这是。$refs.recaptcha.reset（）
},
processRequest:函数（）{
//处理请求
self=这个
让json_payload=self.build_payload（）
轴心柱http://127.0.0.1:5000/data_privacy_request，json_有效负载）
。然后（（响应）=>{
self.$bvModal.show（'bv-modal-email-verify'）
self.recaptchaServerResponse=“”
self.status=“”
}).catch（（错误）=>{
self.serverError=getErrorMessage（err）
//帮助器，以向用户获取可显示的消息
函数getErrorMessage（err）{
让我们一起来回应；
responseBody=err.response；
if（！responseBody）{
responseBody=err；
}否则{
responseBody=err.response.data | | responseBody；
}
返回responseBody.message | | JSON.stringify（responseBody）；
}
})
},
构建负载：函数（）{
如果（此。删除_数据）{
this.subject+=“删除数据，”
}
if（此.访问我的数据）{
this.subject+=“允许访问我的数据，”
}
如果（此。取消订阅）{
this.subject+=“从邮件列表中取消订阅，”
}
如果（使用此数据）{
this.subject+=“了解我的数据是如何使用的，”
}
如果（这个不卖）{
this.subject+=“禁止第三方出售或使用数据，”
}
//从字符串（，）中删除最后一个字符
this.subject=this.subject.slice（0，-2）
让user_name=this.first_name.charAt（0.toUpperCase（）+this.first_name.slice（1）+''+this.last_name.charAt（0.toUpperCase（）+this.last_name.slice（1）
this.body='请求人：'+user_name+'\n'+'电子邮件：'+this.Email+'\n'+'请求：'+this.subject
this.comment={
身体：这个
}
//为第1层添加标签
如果（此。取消订阅）{
this.tags.push（'tier_1'））
}
//为第2层添加标签
如果（this.delete|u data | this.access|u my|u data | this.data | u use | this.don|u sell）{
this.tags.push（'tier_2'）
}
让有效载荷={
车票信息：{
主题：这个主题，
注释：this.comment，
组id:this.group\u id，
票证号码：这个。票证号码，
合作者：这个，合作者，
tags:this.tags
//！受让人id应为Zendesk用户
//受让人身份证：本.受让人\u id
},
用户信息：{
全名：用户名，
电子邮件：this.email
}
}
返回有效载荷
}
},
数据（）{
返回{
名字：''，
姓氏：“”