Laravel布局文件变量最佳实践：菜单激活类优化方案

1. 直接使用Blade三元表达式+路由辅助函数 #

这是最轻量化的实现方式，无需额外封装，直接利用Laravel内置的routeIs()辅助函数在class属性中做判断，代码紧凑直观：

<!-- 匹配单个路由 -->
<a href="{{ route('home') }}" class="menu__item {{ routeIs('home') ? 'menu__item--active' : '' }}">首页</a>

<!-- 匹配路由组（比如所有以posts开头的路由） -->
<a href="{{ route('posts.index') }}" class="menu__item {{ routeIs('posts.*') ? 'menu__item--active' : '' }}">文章管理</a>

routeIs()支持通配符匹配，比手动获取路由名称再做字符串对比更简洁，完全替代单独的@php代码块。

2. 自定义Blade指令封装判断逻辑 #

如果菜单数量多，重复写三元表达式会显得冗余，可以自定义一个Blade指令，把激活类的判断逻辑封装起来：

首先在app/Providers/AppServiceProvider.php的boot()方法中注册指令：

use Illuminate\Support\Facades\Blade;

public function boot()
{
    Blade::directive('active', function ($routePattern) {
        return "<?php echo routeIs($routePattern) ? 'menu__item--active' : ''; ?>";
    });
}

之后在布局文件中直接使用该指令，模板代码会更干净：

<a href="{{ route('home') }}" class="menu__item @active('home')">首页</a>
<a href="{{ route('posts.index') }}" class="menu__item @active('posts.*')">文章管理</a>

后续如果需要修改激活类的名称，只需要调整指令里的字符串即可，无需逐个修改菜单链接。

3. 使用视图组件统一管理菜单项 #

Laravel 7及以上支持视图组件，把菜单项封装成组件后，既能复用激活逻辑，还能统一管理菜单的结构和样式：

第一步：创建组件类 #

在app/View/Components/MenuItem.php中定义组件：

namespace App\View\Components;

use Illuminate\View\Component;

class MenuItem extends Component
{
    public $route;
    public $label;
    public $activeClass = 'menu__item--active';
    public $baseClass = 'menu__item';

    public function __construct($route, $label)
    {
        $this->route = $route;
        $this->label = $label;
    }

    // 计算最终的CSS类
    public function classes()
    {
        $classes = $this->baseClass;
        if (routeIs($this->route)) {
            $classes .= ' ' . $this->activeClass;
        }
        return $classes;
    }

    public function render()
    {
        return view('components.menu-item');
    }
}

第二步：创建组件视图 #

在resources/views/components/menu-item.blade.php中编写模板：

<a href="{{ route($route) }}" class="{{ $classes() }}">
    {{ $label }}
</a>

第三步：在布局中使用组件 #

<x-menu-item route="home" label="首页" />
<x-menu-item route="posts.index" label="文章列表" />
<x-menu-item route="users.index" label="用户管理" />

这种方式的优势在于菜单逻辑与样式完全解耦，后续修改菜单规则时，只需要调整组件即可，无需逐个修改布局里的链接。

补充：子路由层级的激活判断 #

如果需要实现「访问子路由时父菜单保持激活」的效果（比如访问posts.edit时，posts.index菜单也激活），可以扩展判断逻辑：

在组件的classes()方法中修改判断规则：

public function classes()
{
    $classes = $this->baseClass;
    $currentRoute = request()->route()->getName();
    // 匹配当前路由或其子路由
    if ($currentRoute === $this->route || str_starts_with($currentRoute, $this->route . '.')) {
        $classes .= ' ' . $this->activeClass;
    }
    return $classes;
}

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