Laravel: как сделать пункт меню активным по URL-адресу/маршруту

Laravel: как сделать пункт меню активным по URL-адресу/маршруту

Вероятно, одной из наиболее распространенных операций на каждом веб-сайте является назначение «активного» класса CSS в пункт меню, который в настоящее время открыт. Есть довольно много способов обнаружить этот статус, давайте рассмотрим их.

Мы предполагаем, что код будет основан на Bootstrap и активный пункт меню будет иметь это:

<li>
    <a href="{{ route('admin.cities.index') }}">
        <i class="fa fa-flag"></i> <span>Countries</span>
    </a>
</li>
<li class="active">
    <a href="{{ route('admin.cities.index') }}">
        <i class="fa fa-bank"></i> <span>Cities</span>
    </a>
</li>
<li>
    <a href="{{ route('admin.cities.index') }}">
        <i class="fa fa-dollar"></i> <span>Currencies</span>
    </a>
</li>

Теперь, часть, что мы заинтересованы в том, класс "active". В реальном Blade, она должна быть такой:

<li class="{{ ($some_condition_if_active) ? 'active' : '' }}">  

Подход 1. Точный URL-адрес

Наверное, самый простой - вы просто проверить точный URL и посмотреть, если он соответствует:

<li class="{{ (request()->is('admin/cities')) ? 'active' : '' }}">  

Мы используем функцию помощников $request->is().

Подход 2. Начиная с URL-адреса

Это один похож, но более гибким - также будет соответствовать любой другой URL, начиная с того, который мы хотим, как /admin/cities/create или /admin/cities/1/edit.

Для этого мы используем символ звездочки.

<li class="{{ (request()->is('admin/cities*')) ? 'active' : '' }}">  

Подход 3. Соответствие сегменту URL

Другой полезный помощник заключается в том, чтобы получить сегменты URL по номеру.

<li class="{{ (request()->segment(2) == 'cities') ? 'active' : '' }}">  

Таким образом, это будет соответствовать любой URL, как /admin/cities, /user/cities/edit и т.д.

Подход 4. Соответствие маршрута по имени

Тот, который я лично рекомендую. Названия маршрутов - действительно мощное оружие в случае, если ваши URL-адреса по каким-то причинам изменятся. Допустим, мы прикрепили названия маршрутов к этой строке в routes/web.php:

Route::middleware(['auth'])->prefix('admin')->name('admin.')->group(function() {
    Route::resource('cities', 'Admin\CityController');
});

Таким образом, мы должны соответствовать любому названию маршрута, как admin.cities.index или admin.cities.create для пункта меню, чтобы быть активным.

И здесь мы используем Route::getCurrentName() метод.

<li class="{{ (strpos(Route::currentRouteName(), 'admin.cities') == 0) ? 'active' : '' }}">  

В этом случае, все URL-адреса, назначенные нашему находчивому контроллеру, будут соответствовать, как /admin/cities, /admin/cities/create, /admin/cities/1/edit и т.д.


ВВЕРХ