Отправка формы Vue.js Netlify не может быть перенаправлена ​​на пользовательскую страницу благодарности

Question

Создание формы в Vue.JS и подключение с помощью обработчика отправки формы Netlify. Не удается перенаправить на пользовательскую страницу благодарности. Всегда появляется страница благодарности Netlify по умолчанию.

Некоторое время искали в документах и ​​форумах, но безрезультатно.

У меня правильно настроены маршруты для обработки новой страницы / успеха. Ниже вы можете видеть, что я добавил в форму действие, которое должно быть в правильном формате.

Я думаю, что проблема заключается либо в маршрутизации Vue.JS, либо в способе Netlify определить, если / success являетсяактивный компонент / страница. Как и в документации по netlify, в нем говорится, что если путь действия недопустим, он автоматически вернется на страницу благодарности netlify.

https://github.com/DanielGibsonOrchid/freightlegend

https://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
    }
  }
}