如何在 Nuxt 中设置 netlify 表单

Question

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

但是，如果我使用 <a> 标签导航到它（触发页面重新加载），那么它就可以正常工作。

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

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

Answer 1

由于您使用的是 Nuxt，您可能应该完全静态（可在 Netlify-like 平台上托管）或使用 target: server（可在 Heroku-like 平台上托管），但在任何时候，你应该有 ssr: true （默认值）。当你有了这个，最大的部分就完成了。

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

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

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

效果很好，真的很简单。但我宁愿邀请你做一个适当的 SSR 表格，因为你正在使用 Nuxt。

PS：仅对外部 link 标签使用 <a> 标签，即不以您的域名开头的标签，仅此而已。这种link的关注就像硬刷新，应该不惜一切代价避免。

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

编辑如何实现工作形式：

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

如前所述in the docs:

[...] inject a hidden input named form-name [...] and the hidden form-name input’s value matches the name attribute of form

工作正常。可以给它加一个蜜罐，让它更安全！

如何在 Nuxt 中设置 netlify 表单

How to setup a netlify form in Nuxt

single-page-application

vue.js

vue-router

netlify

nuxt.js