Laravel Jetstream+Inertia同页面重定向时Flash消息不显示问题

你遇到的问题核心在于组件生命周期的触发时机：

• 当重定向回同一页面时，Inertia.js会复用现有组件实例（不会重新挂载），所以onMounted钩子不会再次执行。
• 虽然pageProps.flash.success已经更新，但你的flashMessage只在组件首次挂载时赋值，后续的更新无法同步过来。
• 而blade模板里的{{$page.props.flash.success}}能显示，是因为Inertia会自动更新页面props，模板会实时渲染最新值。

有两种简单的修复方式，选其一即可：

方案1：使用watch监听successMessage的变化 #

把onMounted替换成watch，这样不管是首次挂载还是页面更新，只要successMessage有值，就同步给flashMessage：

<script setup>
import { usePage } from "@inertiajs/vue3";
import FlashMessage from "../Components/FlashMessage.vue";
import { ref, computed, watch } from "vue";

const { props: pageProps } = usePage();
const flashMessage = ref("");

const successMessage = computed(() => pageProps.flash.success);

// 监听successMessage的变化
watch(successMessage, (newVal) => {
    if (newVal) {
        flashMessage.value = newVal;
        // 可选：添加自动隐藏逻辑，比如3秒后清空
        setTimeout(() => flashMessage.value = "", 3000);
    }
}, { immediate: true }); // immediate: true 确保首次挂载也会执行
</script>

方案2：直接传递computed属性给FlashMessage #

既然successMessage已经是响应式的computed属性，完全可以跳过中间的flashMessage ref，直接传给组件：

<script setup>
import { usePage } from "@inertiajs/vue3";
import FlashMessage from "../Components/FlashMessage.vue";
import { computed } from "vue";

const { props: pageProps } = usePage();

const successMessage = computed(() => pageProps.flash.success);
</script>

<div class="bg-white w-full shadow relative lg:fixed lg:top-0 z-50">
    <FlashMessage :success="successMessage" />
</div>

这样FlashMessage组件能直接响应successMessage的变化，无需额外处理。

你的handleInertiaRequest里的flash共享逻辑是对的，用闭包延迟获取session值，这能确保每次请求都拿到最新的session flash数据，不用修改这部分代码。

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