Laravel 5.3：当请求与 URL（含语言）匹配时，如何将导航菜单标记为活动菜单

Question

我想在 URL 匹配请求时将导航菜单标记为 "active"。

这工作正常：

    <div class="sidebar">
            <ul class="sidebar-menu">
                    <li {{{ (Request::is('en/dashboard') ? 'class=active' : '') }}}>
                            <a href="/{{ App::getLocale() }}/dashboard">
                                    <i class="fa fa-dashboard"></i> <span>{{ trans('sidebar.dashboard') }}</span>
                            </a>
                    </li>

                    <li {{{ (Request::is('en/settings') ? 'class=active' : '') }}}>
                            <a href="/{{ App::getLocale() }}/settings">
                                    <i class="fa fa-gears"></i> <span>{{ trans('sidebar.settings') }}</span>
                            </a>
                    </li>
            </ul>
    </div>

不幸的是，当 URL 使用语言代码 "en" 时，它只能工作并标记导航菜单。但是我怎样才能用更动态的东西替换静态字符串 "en" 呢？

我已经尝试使用此代码解决此问题，但它不起作用：

    <li {{{ (Request::is('{{ App::getLocale() }}/dashboard') ? 'class=active' : '') }}}>

解决这个问题的最佳方法是什么？

Answer 1

通常，我有一个布局，其中包含由当前视图扩展的这些导航项，例如：

<li><a href="{{ url("home") }}>Home</a></li>
<li><a href="{{ url("about") }}>About</a></li>
<li><a href="{{ url("contact") }}>Contact</a></li>

然后我的路线：

Route::get("/home", "BasicController@getHome");

然后在我的控制器中：

public function getHome(){
    return view("home")->with(["page" => "home"]);
}

现在我的视图 home.blade.php 有一个 $page 被传递给它，因为它扩展了带有导航部分的 .blade 文件（通常是 @extends("layouts.master") 或其他东西) 您可以针对这些导航项访问和检查 $page 变量：

<li class="{{ $page == "home" ? "active" : "" }}><a href="{{ url("/home") }}>Home</a></li>

这样您就不必担心将多种语言的路由匹配到他们的活动页面。唯一的缺点是您需要在每个控制器中包含一个 ->with(["page" => "whatever"])，returns 一个扩展该导航布局的视图。可能有更简单的方法来完成此操作，但这应该给您一个开始。

Answer 2

它 simple.Just 在包含 header 或导航栏和链接的文件中执行以下操作：

<li class="{{ (Request::path()=='nameofyourfile' ? 'active' : '') }}">
 <a href="{{ route('nameofyourfile') }}">
                        <span class="icon fa fa-building-o" aria-hidden="true"></span><span class="title">nameofyourfile</span>
                                                </a></li>

Answer 3

我现在正在使用这个解决方案，效果很好，并且 blade 保持清洁。

首先，在 routes/web.php:

中为每条路线指定一个唯一的名称

    <?php

    /*
    |--------------------------------------------------------------------------
    | Web Routes
    |--------------------------------------------------------------------------
    |
    | Here is where you can register web routes for your application. These
    | routes are loaded by the RouteServiceProvider within a group which
    | contains the "web" middleware group. Now create something great!
    |
    */

    Route::get('/admin/dashboard', 'DashboardController@getAll')->name('dashboard');
    Route::get('/admin/maintenances', 'MaintenanceController@get')->name('maintenances-overview');
    Route::get('/admin/users', 'UserController@getUsers')->name('users-overview');

在您的导航 blade（例如 resources/views/layouts/admin/navbar.blade.php）中，您现在可以简单地引用这些名称：

    <li class="{{ Route::currentRouteName() == 'dashboard' ? 'active' : '' }}">
        <a href="{{ route('dashboard') }}">Dashboard</a>
    </li>

    <li class="{{ Route::currentRouteName() == 'maintenances-overview' ? 'active' : '' }}">
        <a href="{{ route('maintenances-overview') }}">Maintenances</a>
    </li>

    <li class="{{ Route::currentRouteName() == 'users-overview' ? 'active' : '' }}">
        <a href="{{ route('users-overview') }}">Users</a>
    </li>

当您有一个 multi-language 站点时，此解决方案也非常有用，因为您不必使用正则表达式来确定它现在是否匹配 URL。您还可以编辑和更新您的路由 URLs 到您想要的任何内容，而无需更新所有 blades，只是因为 URL 已更改。 route() 函数 returns 自动。更新后的 URL 和 Route::currentRouteName() 函数总是 return 设置您的路线名称。 :)

正如对 multi-language 站点的提示：您可以简单地将静态文本 Users 替换为语言变量：

    <li class="{{ Route::currentRouteName() == 'users-overview' ? 'active' : '' }}">
        <a href="{{ route('users-overview') }}">@lang('layouts/admin/navbar.users')</a>
    </li>

有关本地化的更多信息，请查看 laravel.com localization documentation

Answer 4

只需将这个小功能代码放入您的助手中即可 class

function is_current_route($route){
    return Route::currentRouteName() == $route ? 'class=active' : '';
}

并在您的视图中像这样使用它

<li {{is_current_route('your-route-name-here')}}>
<a href="{{ url("/home") }}>Home</a>
</li>

Laravel 5.3：当请求与 URL（含语言）匹配时，如何将导航菜单标记为活动菜单

Laravel 5.3: How-to mark navigation menu as active, when the request matches the URL (with language)

multilingual

locale

laravel-5