在 Laravel 項目開發中，我們經常需要在導覽選單中標記當前頁面，使其具有顯示不同狀態的 class name，比如 active，這樣方便使用者辨識當前所在的位置。本篇文章將介紹如何根據當前路由名稱，在 Blade 模板中動態切換 a 標籤的 class，實現狀態切換。

Laravel 提供了 request()->routeIs() 方法，讓我們可以輕鬆判斷當前的路由名稱，並根據判斷結果為選單項目添加 active 類別。

範例程式碼

在 Blade 模板中，我們可以這樣使用：

<ul class="list-unstyled dashboard-menu mb-0">
    <li>
        <a href="{{ route('dashboard', ['organization_id' => $organization->id]) }}" 
           class="{{ request()->routeIs('dashboard') ? 'active' : '' }}">
            佈告欄
        </a>
    </li>
    <li>
        <a href="{{ route('notice', ['organization_id' => $organization->id]) }}" 
           class="{{ request()->routeIs('notice') ? 'active' : '' }}">
            報名注意事項
        </a>
    </li>
</ul>

程式碼解析

  1. request()->routeIs('dashboard')：

    • Laravel 提供的 routeIs() 方法，可用來判斷當前的路由名稱是否符合指定的名稱。

    • 若當前頁面的 route name 為 dashboard，則回傳 true，否則為 false。

  2. class="{{ request()->routeIs('dashboard') ? 'active' : '' }}"：

    • 如果 routeIs('dashboard') 回傳 true，則 class 會包含 active，否則不加上任何額外的 class name。

  3. request()->routeIs('notice')：

    • 判斷是否當前頁面為 notice，類似於 dashboard 的邏輯。

 

CSS 樣式設定

確保在 CSS 中定義 active 類別，例如：

.active {
    font-weight: bold;
    color: #007bff;
    text-decoration: underline;
}

透過 request()->routeIs() 方法，我們可以輕鬆判斷當前的路由名稱，並動態切換選單的 active 類別，使導覽列更加直覺易用。這種方式不僅適用於 Laravel，也能有效提升使用者體驗，使頁面瀏覽更加順暢。