Laravel Inertia.js中Flash消息显示后立即消失的问题排查

问题场景 #

为实现Inertia重定向时的Flash消息功能，执行了以下操作：

• 在HandleInertiaRequests.php中配置共享数据：

'flash' => [
    'message' => fn () => $request->session()->get('message')
],

• 控制器处理请求后重定向并携带消息：

return \redirect()->back()->with('message', 'Item added successfully!');

• 前端Vue组件中渲染消息：

<div v-if="$page.props.flash.message">{{$page.props.flash.message}}</div>

实际运行时，消息仅显示约半秒就消失，页面出现类似刷新的异常现象。

解决步骤 #

问题根源在于依赖版本不兼容，通过更新Inertia的Vue3适配依赖解决：

1. 执行安装命令添加对应依赖：

npm install @inertiajs/vue3@^2.0.0

2. 更新后的package.json依赖声明：

"@inertiajs/vue3": "^2.0.0",

（原使用的依赖为"@inertiajs/inertia": "^0.11.0"，未适配Vue3运行环境）

核心原因 #

旧版本的@inertiajs/inertia无法与Vue3正常协作，即便导入了usePage()，也无法正确初始化$page对象，导致Flash消息的状态管理异常，最终出现消息短暂显示后消失的问题。

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