Laravel Livewire中<x-nav-link>组件active状态设置失效问题

问题根源 #

你的路由定义是根路径/并命名为home，但激活判断用了request()->is('home')——这个方法是匹配URL路径而非路由名称。根路径的实际URL是/，不是home，所以判断结果始终为false，导致$active变量为空。

解决方案 #

1. 修正激活判断逻辑 #

将激活判断改为匹配路由名称（推荐），或直接匹配根路径：

方式一：匹配路由名称

使用request()->routeIs('home')判断当前路由是否为命名为home的路由：

<x-nav-link :href="route('home')" :active="request()->routeIs('home')" wire:navigate>Home</x-nav-link>

方式二：匹配根路径

如果路由确实指向根路径，也可以直接匹配路径：

<x-nav-link :href="route('home')" :active="request()->is('/')" wire:navigate>Home</x-nav-link>

2. 验证组件属性传递 #

你的nav-link组件已正确接收active属性，修正判断逻辑后，::{{$active}};;会显示1（true）或空值（false），对应激活/非激活样式。

3. Livewire wire:navigate 注意事项 #

使用wire:navigate时，Livewire会接管页面导航，需确保：

• 路由与Livewire组件配置无冲突
• 若在Livewire组件内使用，也可通过组件属性封装判断逻辑：

// 在Livewire组件类中
public function getActiveProperty()
{
    return request()->routeIs('home');
}

然后在视图中使用：

<x-nav-link :href="route('home')" :active="$active" wire:navigate>Home</x-nav-link>

测试验证 #

修改后访问根路径，$active会被设为true，导航链接将应用激活样式；访问其他页面时自动恢复非激活状态。

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