当我通过添加带有 <router-link>
的链接使用 vue-router 导航到表单时元素,表格不起作用。当我点击提交时,我收到了 404 响应。
但是,如果我使用 <a>
导航到它标签(触发页面重新加载)然后它就可以完美地工作。
我怀疑这与作为 SPA 的页面呈现有关,并且出于某种原因,除非重新加载表单页面,否则不会为 Netlify 加载表单的重要部分?为什么会发生这种情况,是否有解决该问题的优雅方法?我可以用标签替换所有指向表单的链接,但我确信有更好的解决方案,我只是对问题的理解不够深入,无法找到它。
对于上下文,我使用的是 Nuxt。后端的 Netlify 可以识别表单,并且可以接受带有标签链接的提交,所以这不是问题。
最佳答案
由于您使用的是 Nuxt,您可能应该使用 target: 'static'
进行 SSG/全静态(可在类似 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
所以,有了所有这些,它应该已经很好用了。如果不是,如果您有 github 存储库,我很乐意帮助您发现问题。
另一种解决方案是使用某种不依赖任何 SSR 的表单,例如 Formspree:https://formspree.io/ (适用于任何 SPA)
效果很好,非常简单。但我宁愿邀请您制作适当的 SSR 表格,因为您正在使用 Nuxt。
附言:使用<a>
标签只用于外部链接,也就是那些不以您的域名开头的链接,没有别的。跟随这种链接就像一次硬刷新,应该不惜一切代价避免。
编辑:如何通过清理缓存进行部署。
编辑如何实现工作形式:
<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
工作正常。可以在其中添加蜜 jar 以使其更加安全!
关于vue.js - 如何在 Nuxt 中设置 netlify 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67478576/