Laravel向Vue SPA传递数据及表单提交后跳转问题

原因 #

Laravel的redirect()->with('key', 'value')是将数据存入闪存Session，仅在下一次HTTP请求中有效。但你的Vue代码是通过axios发起GET请求获取页面内容，Session中的闪存数据不会自动包含在响应体里，所以axios的response中看不到mailstatus。

解决方案 #

提供3种可行方案，根据场景选择：

方案1：通过Blade模板注入Session数据

在Laravel入口Blade文件（如resources/views/app.blade.php）中，将Session闪存数据注入全局window对象：

<script>
window.flashData = {!! json_encode(session()->pull('mailstatus', null)) !!};
</script>

Vue组件中直接读取：

<script>
export default {
    mounted() {
        if (window.flashData) {
            console.log(window.flashData); // 直接获取mailstatus
        }
    }
}
</script>

注：session()->pull()会取出并删除闪存数据，避免重复读取

方案2：后端提供接口返回Session数据

在routes/web.php中添加路由：

Route::get('/flash-data', function() {
    return response()->json([
        'mailstatus' => session()->pull('mailstatus')
    ]);
});

Vue组件中请求该接口：

<script>
export default {
    mounted() {
        axios.get('/flash-data')
            .then((response) => {
                console.log(response.data.mailstatus);
            });
    }
}
</script>

方案3：通过URL参数传递数据

修改Laravel控制器的重定向逻辑，将数据放在URL查询参数中：

return redirect('/bedankt-voor-je-bericht?mailstatus=' . urlencode('Bedankt voor uw bericht!'));

Vue组件中通过Vue Router的$route对象获取参数：

<script>
export default {
    mounted() {
        console.log(this.$route.query.mailstatus);
    }
}
</script>

原因 #

你使用的是原生HTML表单提交，提交后浏览器会直接刷新页面并展示API返回的JSON内容，不会执行Vue的跳转逻辑，原生表单提交和SPA前端路由逻辑不兼容。

解决方案 #

改用Vue处理表单提交，通过axios异步请求，手动触发路由跳转：

步骤1：修改表单为Vue绑定

去掉原生表单的action和method，添加Vue事件绑定和数据绑定：

<form @submit.prevent="submitForm">
    <!-- 表单字段用v-model绑定 -->
    <input type="text" v-model="formData.name">
    <input type="email" v-model="formData.email">
    <!-- 其他表单内容 -->
    <button type="submit">发送</button>
</form>

步骤2：Vue组件实现提交逻辑

<script>
import axios from 'axios';
export default {
    data() {
        return {
            formData: {
                name: '',
                email: ''
                // 对应表单字段
            }
        }
    },
    methods: {
        async submitForm() {
            try {
                const response = await axios.post('/api/contact/send', this.formData);
                // 提交成功后跳转到目标页面
                this.$router.push('/bedankt-voor-je-bericht');
                // 可将响应数据存入本地存储，在目标页面使用
                localStorage.setItem('mailstatus', response.data.mailstatus);
            } catch (error) {
                console.error(error);
            }
        }
    }
}
</script>

步骤3：修正API控制器返回格式

确保返回正确的键值对JSON结构：

public function __invoke(Request $request)
{
    // 邮件处理逻辑省略
    return response()->json([
        'mailstatus' => 'Bedankt voor uw bericht!'
    ], 200);
}

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