Vue-router环境下表单API提交数据后跳转页面的问题解决方法

问题核心 #

原生表单的submit会触发页面刷新，和Vue Router的单页无刷新跳转逻辑冲突；同时<input type="file">不支持v-model双向绑定，直接用它无法正确获取文件数据。

步骤1：修改表单结构 #

去掉原生form的action和method属性，通过Vue的事件拦截处理提交，给文件输入框添加ref用于获取文件：

<form @submit.prevent="handleSubmit">
  <input ref="fileInput" name="file" type="file" />
  <input name="name" v-model="form.name" label="Name"/>

  <btn label="send" type="submit" v-close-popup/>
</form>

步骤2：实现提交与跳转逻辑 #

用FormData包装表单数据（适配文件上传的multipart/form-data格式），通过异步请求提交，成功后调用Vue Router跳转：

export default {
  data() {
    return {
      form: {
        name: ''
      }
    }
  },
  methods: {
    async handleSubmit() {
      // 构建FormData对象
      const formData = new FormData()
      
      // 添加文件
      const file = this.$refs.fileInput.files[0]
      if (file) {
        formData.append('file', file)
      }
      
      // 添加普通字段
      formData.append('name', this.form.name)

      try {
        // 发送POST请求（这里用axios，也可以用原生fetch）
        await this.$axios.post('/my/api/', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        
        // 请求成功后跳转指定路由
        this.$router.push('/your-target-page')
      } catch (error) {
        // 处理提交失败逻辑
        console.error('提交出错:', error)
      }
    }
  }
}

如果不用axios，原生fetch版本的请求代码：

const response = await fetch('/my/api/', {
  method: 'POST',
  body: formData
})
if (!response.ok) throw new Error('提交失败')
this.$router.push('/your-target-page')

内容的提问来源于stack exchange，提问作者Alex Dalen