Laravel Livewire 3组件中获取当前路由实现动态头部导航

Livewire 3组件的render方法在处理AJAX请求时，request()->route()指向的是Livewire内部的API路由（比如/livewire/message/xxx），而非当前页面的实际路由，所以你无法拿到预期的页面路由名称或URL。

1. 组件挂载时获取初始路由（最常用） #

在组件挂载阶段（页面首次加载时）获取当前页面的路由信息，并存入组件属性中，后续AJAX请求时该属性会保留状态：

use Illuminate\Support\Facades\Route;

class NavBar extends Component
{
    public $currentRouteName;
    public $currentUrl;

    public function mount()
    {
        // 获取路由名称
        $this->currentRouteName = Route::currentRouteName();
        // 获取当前页面URL
        $this->currentUrl = url()->current();
    }

    public function render()
    {
        $banners = Banner::where('website_id', website()->id)->get();
        $this->banners = $banners->map(function($banner) {
            return [
                'imgSrc' => env('APP_URL').'/storage/'.$banner->image,
                'imgAlt' => $banner->title,
                'heading' => $banner->heading,
                'subHeading' => $banner->sub_heading,
                'btn' => $banner->btn,
                'btnLink' => $banner->btn_link,
            ];
        });

        return view('livewire.partials.nav-bar',[
            'placeholder' => $this->placeholder(),
            'categories' => Category::where('website_id', website()->id)->with('sub_categories')->get(),
        ]);
    }
}

之后你可以直接在视图中使用$currentRouteName或$currentUrl来判断导航展示逻辑。

2. 实时监听路由变化（适配SPA/动态路由切换） #

如果页面是通过Livewire导航或SPA路由动态切换的，需要通过JavaScript监听路由变化并同步到组件：

在组件视图中添加脚本：

@push('scripts')
<script>
// 监听Livewire导航完成事件
document.addEventListener('livewire:navigated', () => {
    // 获取当前路由名称（后端渲染时注入）
    const routeName = "{{ Route::currentRouteName() }}";
    // 获取当前URL
    const currentUrl = window.location.href;

    // 更新组件属性
    Livewire.find('{{ $this->id }}').set('currentRouteName', routeName);
});
</script>
@endpush

组件中保留$currentRouteName属性即可，无需额外方法。

3. 测试路由信息的正确方式 #

不要在render中使用dd()（会破坏AJAX响应），可以把路由信息传递到视图中显示：

<!-- 在nav-bar视图中添加 -->
<div>当前路由名称：{{ $currentRouteName }}</div>
<div>当前URL：{{ $currentUrl }}</div>

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