Laravel中Axios提交表单成功后如何重定向至验证码页面？

嘿，这个需求其实挺常见的，咱们分后端Laravel处理和前端Vue/Axios处理两部分来实现就行，我给你一步步拆解清楚：

首先你需要在对应的控制器里，对提交的手机号做校验，验证通过后返回包含跳转地址的成功响应（因为是异步请求，后端直接重定向前端不会自动跳转，得让前端来处理）。

示例代码（假设你的控制器是CustomerController）：

use Illuminate\Http\Request;

class CustomerController extends Controller
{
    public function sendSms(Request $request)
    {
        // 执行手机号及其他条件的校验，规则根据你的实际需求调整
        $validatedData = $request->validate([
            'mobile' => 'required|regex:/^1[3-9]\d{9}$/', // 基础手机号格式验证
            // 比如你还有其他校验，比如手机号未注册：'unique:users,mobile'
        ]);

        // 这里执行发送验证码短信的逻辑（调用短信服务商API等）
        // 注意：记得处理短信发送失败的情况，比如返回错误响应

        // 校验通过且短信发送成功后，返回带跳转地址的JSON响应
        return response()->json([
            'success' => true,
            'redirect_url' => route('verification.code') // 替换成你的验证码页面路由名称
        ]);
    }
}

接下来修改你的Vue组件代码，在Axios的成功回调里判断后端返回的success状态，然后执行页面跳转：

<script>
export default {
    props: ['route'],
    data: function () {
        return {
            mobile: '',
            isSubmitting: false // 可选：添加提交状态，防止重复点击
        }
    },
    methods: {
        submitMobile(){
            if (this.isSubmitting) return; // 阻止重复提交
            this.isSubmitting = true;

            axios.post('/customer/send-sms', { mobile: this.mobile })
                .then(response => {
                    console.log(response.data);
                    // 校验通过，执行跳转
                    if (response.data.success) {
                        // 如果是普通多页应用，用原生跳转
                        window.location.href = response.data.redirect_url;
                        // 如果是Vue单页应用，用vue-router跳转（更友好，无刷新）
                        // this.$router.push(response.data.redirect_url);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                    // 处理校验失败的提示，比如弹出错误信息
                    const errorMsg = error.response?.data?.message || '提交失败，请稍后重试';
                    alert(errorMsg);
                })
                .finally(() => {
                    this.isSubmitting = false; // 重置提交状态
                });
        }
    },
}
</script>

• 记得在Laravel的路由文件里，给验证码页面配置好对应的路由（比如Route::get('/verification/code', [VerificationController::class, 'show'])->name('verification.code');）
• 如果是Vue单页应用，确保你已经正确安装并配置了vue-router，才能用this.$router.push
• 后端的短信发送逻辑要做好异常捕获，比如短信接口调用失败时，返回success: false和对应的错误信息，让前端提示用户
• 可以给前端表单添加手机号的前端校验（比如格式检查），减少不必要的后端请求

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