Nuxt + Netlify Forms 自定义成功页面未找到

Question

我的Nuxt项目中有一个简单的表单 - 托管在Netlify上使用Netlify Forms功能 - 文档在这里 https://www.netlify.com/docs/form-handling/

  <form
    action="/confirm" name="request" method="post" data-netlify="true" netlify-honeypot="bot-field"
  >
    <p class="hidden">
      <label>Don’t fill this out if you're human: <input name="bot-field" ></label>
    </p>
    <v-text-field
      label="Name"
      name="name"
    />
    ...
    <v-btn
      :disabled="!valid"
      type="submit"
    >send
    </v-btn>
  </form>

如果我浏览到 https://mddomain.com/confirm 它工作正常。

如果我在第一次进入/confirm 页面时提交表单，但Netlify不会保护数据。如果我再试一次，我得到了这个错误提示：

未找到页面 您似乎点击了断开的链接或输入了此网站上不存在的 URL。

返回我们的网站

我的代码有什么问题？

Answer 1

检查nuxt.config.js是否mode: 'universal'而不是mode: 'spa'。

Answer 2

对我来说

，将<input type="hidden" name="form-name" value="NAME_OF_YOUR_FORM" />添加到表单中，如果缺少netlify，则会自动创建，解决了问题。

它与 Vue/Nuxt 路由有关。如果我直接导航到我的联系页面或刷新页面，我的表单就可以工作，但在浏览由<NuxtLink>组成的网站的导航时则不行。尽管您可以在他们的论坛深处找到答案，并且许多Nuxt用户在表单方面遇到问题，但他们并没有将其作为提示添加到表单文档中。