如何在使用wire:navigate加载指定路由时添加spinner加载动画

你的代码存在两个核心问题，导致加载动画无法正常触发：

1. wire:target指向无效
   你设置了wire:target="navigateToOrderLists"，但该按钮使用wire:navigate结合路由链接跳转，并未调用名为navigateToOrderLists的Livewire方法，加载状态无法被正确监听。需要移除wire:target，让wire:loading直接监听wire:navigate的跳转过程。

2. 加载动画默认可见
   spinner元素没有默认隐藏类，页面初始化时就会显示。需要给它添加d-none类，仅在加载状态下切换为显示类。

修改后的基础版代码 #

<a href="{{ route('order_lists') }}" class="btn btn-success btn-sm" 
   wire:loading.attr="disabled" 
   wire:navigate
>
    <div wire:loading 
         class="spinner-border spinner-border-sm d-none" 
         role="status"
    >
    </div> 
    
    Order Lists
</a>

优化版（加载时隐藏文字） #

如果想让加载状态下仅显示spinner、隐藏按钮文字，可以这样调整：

<a href="{{ route('order_lists') }}" class="btn btn-success btn-sm" 
   wire:loading.attr="disabled" 
   wire:navigate
>
    <div wire:loading.remove class="d-inline-block">
        Order Lists
    </div>
    <div wire:loading 
         class="spinner-border spinner-border-sm" 
         role="status"
    >
        <span class="visually-hidden">加载中...</span>
    </div> 
</a>

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