Vue.js Netlify表单提交不能重定向到自定义感谢页面

Vue.js是一种流行的JavaScript前端框架，它用于构建用户界面。它具有简洁的语法和响应式数据绑定的能力，使得开发者可以更轻松地构建交互式的Web应用程序。

Netlify是一个现代化的静态网站托管平台，它提供了全球分布式的CDN（内容分发网络），可以快速、安全地托管和部署静态网站。Netlify还提供了一些其他功能，如表单处理、自动构建和部署等。

在Vue.js中，如果要将表单提交重定向到自定义感谢页面，可以通过以下步骤实现：

创建一个Vue组件，包含一个表单元素和一个提交按钮。
在表单元素上绑定一个提交事件，可以使用@submit指令或v-on:submit指令。
在提交事件的处理函数中，使用JavaScript的fetch或axios等库发送POST请求到Netlify的表单处理终结点。
在请求成功后，可以使用Vue Router进行页面重定向到自定义感谢页面。

以下是一个示例代码：

<template>
  <form @submit="submitForm">
    <!-- 表单元素 -->
    <input type="text" v-model="name" placeholder="姓名" required>
    <input type="email" v-model="email" placeholder="邮箱" required>
    <!-- 其他表单元素 -->

    <!-- 提交按钮 -->
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      // 其他表单数据
    };
  },
  methods: {
    submitForm(event) {
      event.preventDefault(); // 阻止表单默认提交行为

      // 发送POST请求到Netlify的表单处理终结点
      fetch('https://api.netlify.com/forms/your-form-id/submissions', {
        method: 'POST',
        body: JSON.stringify({
          name: this.name,
          email: this.email,
          // 其他表单数据
        }),
      })
        .then(response => {
          if (response.ok) {
            // 请求成功，进行页面重定向到自定义感谢页面
            this.$router.push('/thank-you');
          } else {
            // 请求失败，处理错误
            console.error('提交表单失败');
          }
        })
        .catch(error => {
          console.error('提交表单失败', error);
        });
    },
  },
};
</script>

在上述示例中，我们使用了Vue Router进行页面重定向，需要在Vue项目中配置和使用Vue Router。请参考Vue Router的官方文档以了解更多信息。

推荐的腾讯云相关产品和产品介绍链接地址：