Laravel项目中如何根据当前页面为li元素添加Bootstrap active类

这问题我之前做Laravel后台的时候也碰到过，完全不用每个页面写JS，Laravel本身就有好几种优雅的解决方案，给你分享几个常用的：

先给后台所有路由统一设置名称前缀和具体名称，这样后期维护起来特别方便：

// routes/web.php
Route::prefix('admin')->name('admin.')->group(function () {
    Route::get('/dashboard', [AdminController::class, 'dashboard'])->name('dashboard');
    Route::get('/users', [UserController::class, 'index'])->name('users.index');
    Route::get('/users/create', [UserController::class, 'create'])->name('users.create');
    Route::get('/settings', [SettingController::class, 'index'])->name('settings.index');
});

然后在你的后台布局文件（比如resources/views/layouts/admin.blade.php）的侧边栏里，用routeIs()方法判断当前路由是否匹配，动态添加active类：

<ul class="nav nav-sidebar">
    <li class="{{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
        <a href="{{ route('admin.dashboard') }}">仪表盘</a>
    </li>
    <!-- 用通配符*匹配整个用户模块下的所有路由 -->
    <li class="{{ request()->routeIs('admin.users.*') ? 'active' : '' }}">
        <a href="{{ route('admin.users.index') }}">用户管理</a>
    </li>
    <li class="{{ request()->routeIs('admin.settings.*') ? 'active' : '' }}">
        <a href="{{ route('admin.settings.index') }}">系统设置</a>
    </li>
</ul>

这种方法的好处是，哪怕后期你修改了路由的URL路径，只要路由名称不变，侧边栏的active判断完全不需要改动，维护成本极低。

如果不想给路由起名，也可以直接用当前请求的URI来判断，同样支持通配符：

<ul class="nav nav-sidebar">
    <li class="{{ request()->is('admin/dashboard') ? 'active' : '' }}">
        <a href="/admin/dashboard">仪表盘</a>
    </li>
    <li class="{{ request()->is('admin/users/*') ? 'active' : '' }}">
        <a href="/admin/users">用户管理</a>
    </li>
</ul>

这个方法简单直接，但缺点是如果后期修改了后台的URL前缀或者某个页面的路径，你得手动改所有对应的判断，不如路由名称灵活。

如果你的后台有复杂的二级、三级菜单，或者需要更精细的active判断，可以在控制器里给视图共享一个当前菜单的标识：

// app/Http/Controllers/Admin/AdminController.php
class AdminController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth:admin');
        // 默认共享仪表盘为当前菜单
        view()->share('currentMenu', 'dashboard');
    }
}

// 用户控制器里覆盖默认的菜单标识
class UserController extends AdminController
{
    public function __construct()
    {
        parent::__construct();
        view()->share('currentMenu', 'users');
        // 如果是创建用户页面，可以更精细：view()->share('currentMenu', 'users.create');
    }
}

然后在布局文件里根据共享的变量判断：

<ul class="nav nav-sidebar">
    <li class="{{ $currentMenu == 'dashboard' ? 'active' : '' }}">
        <a href="{{ route('admin.dashboard') }}">仪表盘</a>
    </li>
    <li class="{{ str_starts_with($currentMenu, 'users') ? 'active' : '' }}">
        <a href="{{ route('admin.users.index') }}">用户管理</a>
        <!-- 二级菜单示例 -->
        <ul class="nav nav-treeview">
            <li class="{{ $currentMenu == 'users.index' ? 'active' : '' }}">
                <a href="{{ route('admin.users.index') }}">用户列表</a>
            </li>
            <li class="{{ $currentMenu == 'users.create' ? 'active' : '' }}">
                <a href="{{ route('admin.users.create') }}">添加用户</a>
            </li>
        </ul>
    </li>
</ul>

这种方法适合菜单层级多、需要精准控制的场景。

总的来说，最推荐第一种路由名称的方案，既优雅又好维护，完全不需要前端JS介入，后端直接渲染出正确的active状态，页面加载就生效，体验也更好。

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