如何在 Nuxt 中设置 netlify 表单

当我通过添加带有 a 的链接来使用 vue-router 导航到表单时<router-link>元素，表单不起作用。当我点击提交时，我收到了 404 响应。

但是，如果我使用<a>标签（触发页面重新加载）然后它就可以完美工作。

我怀疑这与作为 SPA 的页面呈现有关，并且出于某种原因，除非重新加载表单页面，否则不会加载 Netlify 表单的重要部分？为什么会发生这种情况？是否有一个优雅的解决方案来解决这个问题？我可以用标签替换所有表单链接，但我确信有更好的解决方案，我只是不太了解问题，无法找到它。

对于上下文，我使用 Nuxt。这些表单在后端被 Netlify 识别，并且可以接受带有标签链接的提交，因此这不是问题。

由于您使用的是 Nuxt，因此您可能应该使用 SSG/完全静态target: 'static'（可托管在类似 Netlify 的平台上）或target: 'server'（可托管在类似 Heroku 的平台上）但在任何时候，您都应该拥有ssr: true（默认值）。当你做到了这一点时，最重要的部分就完成了。

在 Nuxt 中，你应该使用<nuxt-link>而不是<router-link>，它的工作原理完全相同（采用相同的参数等），但它更特定于 Nuxt 和 SSR/SSG 兼容，而<router-link>不是。更多详细信息请参见此处：https://nuxtjs.org/docs/2.x/features/nuxt-components#the-nuxtlink-component https://nuxtjs.org/docs/2.x/features/nuxt-components#the-nuxtlink-component

所以，有了这一切，它应该已经很好用了。如果不是，如果您有 github 存储库，我很乐意帮助您发现问题。

另一种解决方案是使用某种没有任何 SSR 依赖性的表单，例如 Formspree：https://formspree.io/ https://formspree.io/（适用于任何 SPA）

它效果很好，非常简单。但我宁愿邀请您制作适当的 SSR 表单，因为您正在使用 Nuxt。

PS: use <a>仅用于外部链接的标签，即那些不以您的域名开头的标签，仅此而已。关注这种链接就像硬刷新一样，应该不惜一切代价避免。

编辑：如何通过清理缓存来部署。

编辑如何实现工作形式：

<template>
  <div>
    <form
      netlify
      action="/"
      method="POST"
      name="Contact"
    >
      <input type="hidden" name="form-name" value="Contact" />
      <!-- ... -->
    </form>
  </div>
</template>

As told 在文档中 https://docs.netlify.com/forms/setup/#html-forms:

[...] 注入一个名为 form-name 的隐藏输入 [...] 并且隐藏的 form-name 输入的值与表单的 name 属性相匹配

工作正常。可以添加一个蜜罐以使其更加安全！