页面
通过将 Livewire 组件直接分配给路由，可以把组件当作整页使用。这样你就能用 Livewire 组件构建完整的应用页面，并具备自定义布局、页面标题、路由参数等能力。
路由到组件
要路由到某个组件，在 routes/web.php 中使用 Route::livewire() 方法：
Route::livewire('/posts/create', 'pages::post.create');访问指定 URL 时，该组件会使用你应用的布局渲染为完整页面。
布局
通过路由渲染的组件会使用应用的布局文件。默认情况下，Livewire 会查找名为 layouts::app、位于 resources/views/layouts/app.blade.php 的布局。
若该文件尚不存在，可运行以下命令创建：
php artisan livewire:layout该命令会生成 resources/views/layouts/app.blade.php 文件。
请确保已在该位置创建 Blade 文件，并包含 {{ $slot }} 占位符：
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? config('app.name') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
</head>
<body>
{{ $slot }}
@livewireScripts
</body>
</html>你可以通过修改 config/livewire.php 中的 component_layout 配置项来自定义默认布局：
'component_layout' => 'layouts::dashboard',组件级布局
若要为特定组件使用不同布局，可在组件类上方放置 #[Layout] 属性：
<?php
use Livewire\Attributes\Layout;
use Livewire\Component;
new #[Layout('layouts::dashboard')] class extends Component { // [tl! highlight]
// ...
};也可以在组件的 render() 方法中使用 ->layout() 方法：
<?php
use Livewire\Component;
new class extends Component {
// ...
public function render()
{
return $this->view()
->layout('layouts::dashboard'); // [tl! highlight]
}
};设置页面标题
为应用中的每个页面设置独特的标题，对用户和搜索引擎都有帮助。
要为页面组件设置自定义标题，首先确保布局文件包含动态标题：
<head>
<title>{{ $title ?? config('app.name') }}</title>
</head>接着，在 Livewire 组件类上方添加 #[Title] 属性，并传入页面标题：
<?php
use Livewire\Attributes\Title;
use Livewire\Component;
new #[Title('Create post')] class extends Component { // [tl! highlight]
// ...
};这会为该组件设置页面标题。在本例中，组件渲染后页面标题将是「Create Post」。
若需要传入动态标题（例如使用组件属性的标题），可在组件的 render() 方法中使用 ->title() 链式方法：
public function render()
{
return $this->view()
->title('Create Post'); // [tl! highlight]
}设置布局文件中的其他插槽
如果布局文件除 $slot 外还有命名插槽，可在 Blade 视图中于根元素之外定义 <x-slot> 来设置其内容。例如，若希望为每个组件单独设置页面语言，可在布局文件的 HTML 开始标签中加入动态 $lang 插槽：
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', $lang ?? app()->getLocale()) }}"> <!-- [tl! highlight] -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? config('app.name') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
</head>
<body>
{{ $slot }}
@livewireScripts
</body>
</html>然后，在组件视图中于根元素之外定义 <x-slot> 元素：
<x-slot:lang>fr</x-slot> // This component is in French <!-- [tl! highlight] -->
<div>
// French content goes here...
</div>访问路由参数
使用页面组件时，你可能需要在 Livewire 组件中访问路由参数。
下面举例说明：先在 routes/web.php 中定义带参数的路由：
Route::livewire('/posts/{id}', 'pages::show-post');这里定义了一条带 id 参数的路由，表示文章的 ID。
接着，更新 Livewire 组件，在 mount() 方法中接收该路由参数：
<?php
use App\Models\Post;
use Livewire\Component;
new class extends Component {
public Post $post;
public function mount($id) // [tl! highlight]
{
$this->post = Post::findOrFail($id);
}
};在本例中，由于参数名 $id 与路由参数 {id} 匹配，访问 /posts/1 时，Livewire 会将值「1」作为 $id 传入。
使用路由模型绑定
Laravel 的路由模型绑定允许你根据路由参数自动解析 Eloquent 模型。
在 routes/web.php 中定义带模型参数的路由之后：
Route::livewire('/posts/{post}', 'pages::show-post');现在可以通过组件的 mount() 方法接收该路由模型参数：
<?php
use App\Models\Post;
use Livewire\Component;
new class extends Component {
public Post $post;
public function mount(Post $post) // [tl! highlight]
{
$this->post = $post;
}
};由于 mount() 中 $post 参数前有 Post 类型提示，Livewire 知道应使用「路由模型绑定」。
和之前一样，你可以省略 mount() 方法以减少样板代码：
<?php
use Livewire\Component;
use App\Models\Post;
new class extends Component {
public Post $post; // [tl! highlight]
};$post 属性会自动赋值为路由 {post} 参数所绑定的模型。