Laravel结合VueJS：重定向回页后实现页面自动刷新的方法

Hey there! I’ve run into this exact issue before with Inertia, so let’s break down why your ->refresh() didn’t work and walk through a few solid fixes.

First, quick context: Laravel’s ->refresh() is built for traditional full-page HTTP requests, but Inertia operates as a single-page app (SPA). When you use redirect()->back() with Inertia, it doesn’t trigger a browser refresh by default—it just updates component props without reloading the page entirely. That’s why your initial attempt didn’t have the effect you wanted.

Here are three reliable solutions to get that auto-refresh behavior:

1. Manually Refresh Component Data on Successful Response #

The simplest SPA-friendly approach is to explicitly fetch your data again once the Inertia post request succeeds.

In your Vue component’s submission method:

this.$inertia.post('/your-api-endpoint', formData)
  .then(response => {
    // Check if the success flash message exists
    if (response.props.success) {
      // Call your data-fetching method (replace with your actual function)
      this.loadPageData();
    }
  });

Keep your backend code unchanged:

return redirect()->back()->with('success', 'Saved!');

Inertia automatically passes flash messages to your component’s props, so you can use that as a trigger to refresh your data.

2. Force a Full Page Refresh from the Backend #

If you need a full browser refresh (for cases like reloading assets or resetting all component state), you can use Inertia’s built-in methods to trigger this.

Option A: Use Inertia::location() #

use Inertia\Inertia;

return Inertia::location(url()->previous())->with('success', 'Saved!');

Option B: Add a Custom Redirect Header #

return redirect()->back()
  ->with('success', 'Saved!')
  ->withHeaders(['X-Inertia-Redirect' => true]);

Both of these tell Inertia to trigger a full page reload instead of just updating component props.

3. Watch for Flash Messages to Auto-Refresh #

Set up a watcher in your Vue component to listen for changes to Inertia’s flash props. This way, whenever a success message comes through, your component automatically refreshes its data.

In your Vue component:

watch: {
  '$page.props.flash'(newFlash) {
    // Trigger data refresh when the success message is present
    if (newFlash?.success) {
      this.loadPageData();
    }
  }
}

Update your backend to use ->withFlash() (an Inertia alias for passing flash messages cleanly):

return redirect()->back()->withFlash(['success' => 'Saved!']);

This approach is great if you want auto-refresh to work across multiple components without repeating code.

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