Skip to content

重定向

在用户执行某些操作(例如提交表单)后,你可能希望将他们重定向到应用程序中的另一个页面。

因为 Livewire 请求不是标准的全页浏览器请求,所以标准的 HTTP 重定向不起作用。相反,你需要通过 JavaScript 触发重定向。幸运的是,Livewire 公开了一个简单的 $this->redirect() 辅助方法,可在组件中使用。在内部,Livewire 将处理在前端重定向的过程。

如果你愿意,也可以在组件中使用 Laravel 的内置重定向工具

基本用法

以下是一个 post.create Livewire 组件的示例,它在用户提交表单创建帖子后将用户重定向到另一个页面:

php
<?php

use Livewire\Component;
use App\Models\Post;

new class extends Component
{
	public $title = '';

    public $content = '';

    public function save()
    {
		Post::create([
			'title' => $this->title,
			'content' => $this->content,
		]);

		$this->redirect('/posts'); // [tl! highlight]
    }
};
?>

<form wire:submit="save">
    <!-- Form fields... -->
</form>

如你所见,当触发 save 操作时,也会触发到 /posts 的重定向。当 Livewire 收到此响应时,它将在前端将用户重定向到新 URL。

重定向到路由

如果你想使用路由名称重定向到页面,可以使用 redirectRoute

例如,如果你有一个名为 'profile' 的路由的页面,如下所示:

php
    Route::get('/user/profile', function () {
        // ...
    })->name('profile');

你可以使用 redirectRoute 使用路由名称重定向到该页面,如下所示:

php
    $this->redirectRoute('profile');

如果你需要向路由传递参数,可以使用 redirectRoute 方法的第二个参数,如下所示:

php
    $this->redirectRoute('profile', ['id' => 1]);

重定向到预期页面

如果你想将用户重定向回他们之前所在的页面,可以使用 redirectIntended。它接受一个可选的默认 URL 作为其第一个参数,如果无法确定之前的页面,则将其用作后备:

php
    $this->redirectIntended('/default/url');

重定向到全页面组件

因为 Livewire 使用 Laravel 的内置重定向功能,你可以使用典型 Laravel 应用程序中可用的所有重定向方法。

例如,如果你将 Livewire 组件用作路由的全页面组件,如下所示:

php
Route::livewire('/posts', 'pages::show-posts');

你可以简单地使用路由路径重定向到它:

php
public function save()
{
    // ...

    $this->redirect('/posts');
}

闪存消息

除了允许你使用 Laravel 的内置重定向方法外,Livewire 还支持 Laravel 的会话闪存数据工具

要与重定向一起传递闪存数据,你可以像这样使用 Laravel 的 session()->flash() 方法:

php
<?php

use Livewire\Component;

new class extends Component
{
    // ...

    public function update()
    {
        // ...

        session()->flash('status', 'Post successfully updated.');

        $this->redirect('/posts');
    }
};
?>

假设被重定向到的页面包含以下 Blade 片段,用户将在更新帖子后看到"Post successfully updated."消息:

blade
@if (session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
@endif