Laravel+Vue.js表单提交后跳转带查询串页面，如何实现无刷新提交？

看起来你遇到的核心问题是表单提交后依然触发了页面刷新，同时数据传递也存在一些小问题，咱们一步步来修正：

首先，修复HTML结构的问题 #

你写了嵌套的<form>标签，这会导致外层的@submit.prevent无法正确阻止内层表单的默认提交行为，浏览器还是会走传统的表单提交流程（带查询字符串刷新页面）。把多余的内层form删掉：

<form action="#" @submit.prevent="submitMobile">
    <div class="container my-5 z-depth-1">
        <!-- Section heading -->
        <div class="input-group">
            <input 
                class="form-control send-sms-btn" 
                name="mobile" 
                v-model="form.mobile" <!-- 绑定到Vue的data字段 -->
                v-validate="'required|min:11|max:11'" <!-- 修正验证规则，用竖线分隔 -->
                placeholder="请输入11位手机号" 
                aria-label="Enter your mobile number" 
                aria-describedby="button-addon2"
            >
            <div class="input-group-append">
                <button class="btn-theme btn btn-md btn-primary rounded-right m-0 px-3 py-2 z-depth-0 waves-effect" type="submit" id="button-addon2">提交</button>
            </div>
        </div>
    </div>
</form>

然后，修正Vue组件的代码问题 #

你的组件里存在几个关键问题：没有定义表单数据、请求写法错误、headers拼写错误，咱们一一修正：

import axios from 'axios'; // 确保已经导入axios

export default {
    data() {
        return {
            form: {
                mobile: '' // 定义表单绑定的字段，和input的v-model对应
            }
        }
    },
    methods: {
        async submitMobile() {
            // 先执行表单验证（如果你用了vee-validate的话）
            const isValid = await this.$validator.validateAll();
            if (!isValid) {
                console.log('表单验证失败');
                return;
            }

            try {
                const response = await axios({
                    method: 'POST',
                    url: '/customer/send-sms',
                    data: { 
                        mobile: this.form.mobile 
                    },
                    headers: {
                        'Content-Type': 'application/json', // 修正拼写错误：appllication → application
                        'Accept': 'application/json',
                        // 如果Laravel需要CSRF令牌，记得加上：
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                });
                
                console.log('提交成功:', response.data);
                // 这里可以做成功后的操作，比如弹窗提示，而不是直接跳转（如果需要跳转的话再用这个）
                // window.location.href = "/";
            } catch (error) {
                console.error('提交失败:', error.response?.data || error.message);
            }
        }
    }
}

关键修改点说明 #

1. 移除嵌套form：确保只有一个form标签，@submit.prevent才能正确阻止默认提交行为。
2. 添加v-model绑定：把input的值和Vue的form.mobile双向绑定，这样才能拿到用户输入的手机号。
3. 修正表单验证规则：vee-validate的规则用竖线|分隔，比如'required|min:11|max:11'。
4. 定义表单数据：在data里声明form对象，存储手机号字段。
5. 修正axios请求：
   • 修复Content-Type的拼写错误（appllication → application）
   • 加上Laravel必需的X-CSRF-TOKEN请求头（否则会返回419错误）
   • 使用async/await让代码更易读，也能正确处理异步流程
6. 避免立即跳转：原来的.then(window.location.href = "/")会直接执行跳转，不会等请求完成，改成在请求成功的回调里操作。

额外注意事项 #

• 确保你的Laravel后端路由/customer/send-sms是POST请求，并且返回JSON格式的响应。
• 如果用了vee-validate，要确保组件里已经正确注册了验证器（比如在main.js里配置过）。
• 测试的时候打开浏览器控制台，查看Network标签，确认请求是否成功发送，有没有报错信息。

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