重定向

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

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

如果您愿意，您还可以在组件中使用 Laravel 的内置重定向实用程序。

#基本用法

以下是 CreatePost Livewire 组件的示例，该组件在用户提交创建帖子的表单后将用户重定向到另一个页面

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
use App\Models\Post;
 
class CreatePost extends Component
{
    public $title = '';
 
    public $content = '';
 
    public function save()
    {
        Post::create([
            'title' => $this->title,
            'content' => $this->content,
        ]);
 
        $this->redirect('/posts'); 
    }
 
    public function render()
    {
        return view('livewire.create-post');
    }
}

如您所见，当触发 save 操作时，还将触发重定向到 /posts。当 Livewire 收到此响应时，它将在前端将用户重定向到新 URL。

#重定向到路由

如果您想使用其路由名称重定向到页面，则可以使用 redirectRoute。

例如，如果您有一个路由名为 'profile' 的页面，如下所示

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

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

$this->redirectRoute('profile');

如果您需要将参数传递给路由，则可以使用 redirectRoute 方法的第二个参数，如下所示

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

#重定向到预期

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

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

#重定向到全页组件

由于 Livewire 使用 Laravel 的内置重定向功能，因此您可以在典型的 Laravel 应用程序中使用所有可用的重定向方法。

例如，如果您将 Livewire 组件用作路由的全页组件，如下所示

use App\Livewire\ShowPosts;
 
Route::get('/posts', ShowPosts::class);

您可以通过向 redirect() 方法提供组件名称来重定向到该组件

public function save()
{
    // ...
 
    $this->redirect(ShowPage::class);
}

#闪存消息

除了允许您使用 Laravel 的内置重定向方法外，Livewire 还支持 Laravel 的 会话闪存数据实用程序。

若要将闪存数据与重定向一起传递，您可以使用 Laravel 的 session()->flash() 方法，如下所示

use Livewire\Component;
 
class UpdatePost extends Component
{
    // ...
 
    public function update()
    {
        // ...
 
        session()->flash('status', 'Post successfully updated.');
 
        $this->redirect('/posts');
    }
}

假设要重定向到的页面包含以下 Blade 代码段，则用户在更新帖子后会看到“帖子已成功更新。”消息

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