Vue.js Netlify 表单提交无法重定向到自定义感谢页面

Question

在 Vue.JS 中创建一个表单并与 Netlify 的表单提交处理程序连接。无法重定向到自定义感谢页面。Netlify 的默认感谢页面总是出现。在文档和论坛上搜索了一段时间，但无济于事。我正确设置了路线来处理新页面/成功。您可以在下面看到我向表单添加了一个操作，该操作应该采用正确的格式。我认为问题要么与 Vue.JS 路由有关，要么与 Netlify 识别 /success 是否为活动组件/页面的方式有关。正如在 netlify 文档中所说，如果操作路径无效，那么它将自动默认返回到 netlify 的感谢页面。https://github.com/DanielGibsonOrchid/freightlegendhttps://freightlegend.netlify.com/        <form           action="/success"          class="get-started-form"           name="get-started"           method="post"           data-netlify="true"          data-netlify-honeypot="bot-field"        >          <input type="hidden" name="bot-field" />          <input type="hidden" name="form-name" value="get-started" />          <div class="form-content flex">            <input type="text" name="name" placeholder="Your name" class="input-main" required />            <input type="email" name="email" placeholder="Your email" class="input-main input-margin" required />            <div class="select-div">              <select name="country" class="input-main">                <option value="New Zealand">New Zealand</option>                <option value="Australia">Australia</option>                <option value="USA">USA</option>                <option value="Other">Other</option>              </select>            </div>          </div>          <input type="submit" class="btn-main" />          <!-- <button type="submit" class="btn-main">Submit Query</button> -->        </form>public/_redirects/locale.json  /locales/us.json  302  Country=us/locale.json  /locales/au.json  302  Country=au/locale.json  /locales/nz.json  302  Country=nz/*            /index.html       200

Answer 1

看起来你已经做了几乎所有可能的事情。在这个阶段，我不得不猜测使用带有 SPA 的自定义成功页面不是 Netlify 处理的事情。

我会改为使用AJAX 表单提交。

例如

<form @submit.prevent="handleFormSubmit" ...>

methods: {

  async handleFormSubmit ($event) {

    const form = $event.target

    const body = new URLSearchParams(new FormData(form))

    try {

      const res = await fetch(form.action, { method: 'POST', body })

      if (res.ok) {

        this.$router.push({ name: 'thanks' })

      } else {

        throw res

      }

    } catch (err) {

      console.error(err)

      // you don't have an error page but maybe you should add one

    }

  }

}