Javascript 在vue js中离开路线前提交表单

我是VueJs的新手，遇到了一个问题。我正在创建一个表单，希望显示一个警告对话框，其中显示消息“您可能会丢失数据，请在离开前保存数据”。当我单击“是”时，它应提交表单并更改路线

我知道我们可以在路线离开前使用

执行此操作（到、从、下一个）

，但在警告框中单击“是”时，如何在路线离开前提交表单

在上图中，我的路线是

/create

当

handleArticleSubmit() {
    // Collect form data
    let formData = new FormData();

    // Start Button Loading
    this.isSubmittingArticle = true;
    axios
      .post("/articles", formData, {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
      .then(res => {
        // Stop button loading
        this.isSubmittingArticle = false;
        // Show alert message
        this.snackbar = {
          isVisible: true,
          color: "success",
          text: "Article submited successfully"
        };

      })
      .catch(error => {
        // Stop button loading
        this.isSubmittingArticle = false;
        // Show alert
          // Show alert message
          this.snackbar = {
            isVisible: true,
            color: "error",
            text: error
          };
        }
      });
  }
},

上面提到的代码保存了我想更改路由的文章，如果表单提交了所有验证（如空白、数字等），则不应更改路由。 谢谢 现在我正在使用此代码更改路线：

beforeRouteLeave(to, from, next) {
  const answer = window.confirm(
    "you might lose the data, please save the data before you leave."
  );
  if (answer) {
    this.handleArticleSaveDraft();
    next();
  } else {
    next(false);
}

谢谢。

编辑评论 您需要注意以下几点：

提出手动提交方法

在路由前进行异步保存

使用尝试/缓存检查承诺，因此，如果承诺被拒绝（表单有错误），页面不会更改，您也可以根据需要记录错误

请参见下面的实现方式：

---

---

老话 这在Vue路由器文档中的as Leave Guard中特别提到

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('you might lose the data, please save the data before you leave.')
  if (answer) {
    this.submit() // Submit your form here however you want
    next()
  } else {
    next(false)
  }
}

或者，如果您有自定义模式系统，请将其设置为异步，并确保您的模式返回承诺：

async beforeRouteLeave (to, from, next) {
  const answer = await this.openModal()
  if (answer) {
    this.submit() // Submit your form here however you want
    next()
  } else {
    next(false)
  }
}

---

@感谢您的回复，但我想使用beforeRouteLave（）中提到的两个内容，向我们展示您到目前为止的代码。@RobertHarvey在问题中添加了代码

async beforeRouteLeave (to, from, next) {
  const answer = await this.openModal()
  if (answer) {
    this.submit() // Submit your form here however you want
    next()
  } else {
    next(false)
  }
}