Livewire分页点击无响应 手动传?page参数可正常访问问题咨询

故障根因优先级排序及修复步骤 #

1. 布局文件缺失Livewire静态资源（最常见原因） #

Livewire 2.x 依赖自带的前端JS/CSS实现交互，未引入的话所有wire:开头的指令都会失效，手动输入地址能加载是因为走的是服务端直接渲染，和前端交互逻辑无关。
修复方式：
打开layouts/base.blade.php模板：

• 在<head>标签内部添加 @livewireStyles
• 在</body>闭合标签前添加 @livewireScripts

2. 未显式指定Bootstrap分页主题 #

Livewire默认分页主题为Tailwind，你使用Bootstrap自定义分页模板必须显式声明主题，否则交互逻辑不匹配。
修复方式：
在ShopComponent类中添加属性声明：

class ShopComponent extends Component
{
    use WithPagination;
    // 新增以下行
    protected $paginationTheme = 'bootstrap';
    
    // 原有代码不变
}

3. 循环渲染条目缺失唯一wire:key #

Livewire做DOM diff更新时依赖唯一wire:key识别节点，循环产品未加该属性会导致节点识别混乱，事件绑定失效。
修复方式：
修改shop-component.blade.php的循环代码：

@foreach ($products as $product)
<!-- 新增wire:key属性 -->
<div class="col-sm-6 col-lg-4 mb-30" wire:key="prod-{{ $product->id }}">
    <!-- 原有产品卡片代码保持不变 -->
</div>
@endforeach

4. 缓存/资源冲突问题 #

执行以下命令清理缓存并重新发布Livewire资源：

php artisan view:clear
php artisan cache:clear
php artisan livewire:publish --assets

执行完成后硬刷新浏览器（Windows按Ctrl+Shift+R，Mac按Command+Shift+R）重新测试。

兜底排查 #

如果以上操作后仍未恢复，打开浏览器控制台查看JS报错：

• 若提示Livewire is not defined：检查Livewire资源加载路径是否正确，是否被安全策略、CDN拦截
• 若存在其他第三方JS报错：暂时停用非必要的第三方JS插件逐一排查冲突

内容的提问来源于stack exchange，提问作者Ross