Laravel 11 + Livewire 3 分页无法显示问题求助

云上老周

2026-6-22

Laravel 11 + Livewire 3 + Tailwind CSS 分页显示异常问题

我使用Laravel 11、Livewire 3和Tailwind CSS搭建简易系统时，遇到数据分页无法正常显示的问题。未修改Livewire 3配置，网上查找方案无果，新建Laravel 11项目仍出现相同问题。

相关代码

Dashboard视图代码

<x-main>
   <x-slot name="title">Dashboard</x-slot>

   <div class="container mx-auto">
      Dashboard

      @dump($dataUsers)

      @foreach ($dataUsers as $item)
         <div class="">
            test
         </div>
      @endforeach

      Paginate {{ $dataUsers->links() }}
   </div>
</x-main>

x-main组件代码

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite('resources/css/app.css')
    <title>{{ $title ?? 'Page Title' }}</title>
    <livewire:styles />
</head>

@auth
<livewire:component.navbar>
    @endauth

    <body>
        {{ $slot }}
        <livewire:scripts />
    </body>

</html>

路由代码

Route::middleware('auth')->group(function () {
    Route::get('dashboard', function () {
        return view('layouts.pages.admin.dashboard', ['dataUsers' => User::paginate(1)]);
    })->name('dashboard');
});

分页异常表现

分页链接显示为未渲染的原始HTML代码，如图所示：
分页显示异常

解决方法

修复HTML转义问题：
Laravel的{{ }}会自动转义HTML内容，导致分页的HTML代码无法正常渲染。将Dashboard视图中的分页代码改为使用{!! !!}输出未转义的HTML：
```
Paginate {!! $dataUsers->links() !!}
```
适配Tailwind CSS样式（可选）：
若需要分页样式适配Tailwind，可安装Laravel官方的Tailwind分页组件：
- 执行安装命令：
```
composer require laravel/pagination
```
- 在config/view.php中配置分页视图：
```
'pagination' => 'tailwind::pagination',
```