主题
重定向
在用户执行某些操作后——如提交表单——你可能希望将他们重定向到应用程序中的另一个页面。
因为 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');
}
};
?>
<form wire:submit="save">
<!-- 表单字段... -->
</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');
}重定向到控制器方法
如果你想重定向到由控制器方法处理的路由,你可以使用 redirectAction():
php
$this->redirectAction([UserController::class, 'index']);你可以将控制器操作的参数作为第二个参数传递:
php
$this->redirectAction([UserController::class, 'show'], ['id' => 1]);Flash 消息
除了允许你使用 Laravel 的内置重定向方法外,Livewire 还支持 Laravel 的 session flash 数据工具。
要在重定向时传递 flash 数据,你可以像这样使用 Laravel 的 session()->flash() 方法:
php
<?php
use Livewire\Component;
new class extends Component {
// ...
public function update()
{
// ...
session()->flash('status', '帖子更新成功。');
$this->redirect('/posts');
}
};
?>假设被重定向到的页面包含以下 Blade 代码段,用户将在更新帖子后看到"帖子更新成功。"消息:
blade
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif