Laravel/Inertia中Vue表单提交后重定向失效弹出模态框的问题

问题概述 #

在Laravel/Inertia项目中，点击“Lancer l'analyse”按钮提交Vue表单后，控制器返回的redirect("/fiabilisation")操作未触发页面跳转，反而弹出模态框，问题出在表单实现逻辑上。

核心原因 #

1. Inertia请求机制限制：Inertia是单页应用框架，前端提交的是AJAX请求，后端返回的普通redirect会被当作数据响应，而非页面跳转指令。
2. 前端数据绑定错误：隐藏input直接绑定对象prepareReliabilityAnalyze到:value，会导致对象被转为字符串[object Object]，后端无法正确解析数据。
3. 原生表单属性冲突：表单设置method="post"，与Inertia的AJAX提交逻辑产生干扰。

解决方案 #

后端修改（ReliabilityController） #

使用Inertia兼容的重定向方式，确保响应能被Inertia识别为跳转指令：

use Inertia\Inertia;

public function analyse()
{
    $analyse = request('analyse');
    
    $data = json_decode($analyse["payload"], true);
    $extension = unserialize($data["data"]["command"]);

    JobReliabilityAnalyze::dispatch($analyse, $extension->getExtension());

    // 方式1：使用路由名跳转（推荐，需确保fiabilisation页面有对应路由）
    return redirect()->route('fiabilisation')->with("message", "Analyse terminée");
    
    // 方式2：直接指定URL强制跳转
    // return Inertia::location('/fiabilisation')->with("message", "Analyse terminée");
}

前端修改（ResolveAmbigious.vue） #

改用Inertia官方useForm助手处理表单提交，避免原生表单干扰：

<template>
    <form @submit.prevent="submitAnalyse">
        <button 
            :class="{
                'enedis-btn': true,
                'enedis-btn-small': true,
                'enedis-btn-off': !prepareReliabilityAnalyze.ready,
            }" 
            :disabled="!prepareReliabilityAnalyze.ready || form.processing"
        >
            {{ form.processing ? 'En cours...' : 'Lancer l\'analyse' }}
        </button>
    </form>
</template>

<script setup>
import { useForm } from '@inertiajs/vue3';

// 用Inertia Form自动处理数据序列化与提交状态
const form = useForm({
    analyse: prepareReliabilityAnalyze,
});

function submitAnalyse() {
    form.post('/analyse', {
        onSuccess: () => {
            // 成功后的可选逻辑，Inertia会自动处理后端重定向
        },
        onError: (errors) => {
            // 错误处理逻辑
        },
    });
}
</script>

控制台兼容模式提示修复 #

控制台提示“此页面处于兼容模式（quirks），布局可能受影响。如需标准模式，请使用""”，需在项目根HTML文件中添加标准DOCTYPE声明：

<!DOCTYPE html>
<html lang="fr">
<head>
    <!-- 其他头部内容 -->
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

关键注意点 #

• 确保后端路由/analyse未被排除在Inertia中间件外
• 用form.processing状态控制按钮禁用，避免重复提交
• 后端with("message")可通过Inertia的usePage()在前端获取展示

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