本文介绍在 laravel 多页面仪表盘中，通过服务端逻辑（而非仅依赖 jquery）精准识别并高亮当前激活的侧边栏导航链接，避免页面刷新后状态丢失的问题。

本文介绍在 laravel 多页面仪表盘中，通过服务端逻辑（而非仅依赖 jquery）精准识别并高亮当前激活的侧边栏导航链接，避免页面刷新后状态丢失的问题。

在 Laravel 中实现导航链接的“激活态”（active state），关键在于将状态判定逻辑从客户端 JavaScript 迁移到服务端渲染阶段。你当前使用的 jQuery 点击添加 active 类的方式，虽然能临时高亮，但一旦页面跳转（即服务端完整响应新页面），整个布局重新渲染，DOM 状态重置，导致高亮失效——这正是你遇到的问题。

✅ 正确解法是：在 Blade 模板中，利用 Laravel 内置的 Route::is() 辅助方法，在服务端动态为匹配当前路由的链接添加 active 类。该方法在视图渲染时即完成判断，生成的 HTML 已携带正确的 class，无需依赖 JS 维护状态，天然兼容所有页面跳转场景。

以你的侧边栏为例，将原静态写法：

<a href="%7B%7B%20route('dashboard.newcairo.interests')%20%7D%7D" class="a-reset">
  <div class="sidebar-link py-2">
    <i class="fa-solid fa-envelope px-2"></i>
    <h6 class="nexa-bold text-white d-inline-block">iCity New Cairo</h6>
  </div>
</a>

替换为带条件判断的写法：

Laravel Cloud

Laravel Cloud（cloud.laravel.com）。此技能用于处理所有 Laravel Cloud 请求，包括搜索和读取数据。只要任务涉及 Laravel Cloud，即使用此技能。

下载

<a href="%7B%7B%20route('dashboard.newcairo.interests')%20%7D%7D" class="a-reset">
  <div class="{{ Route::is('dashboard.newcairo.interests') ? 'active sidebar-link' : 'sidebar-link' }} py-2">
    <i class="fa-solid fa-envelope px-2"></i>
    <h6 class="nexa-bold text-white d-inline-block">iCity New Cairo</h6>
  </div>
</a>

同理，其他链接也按此模式更新：

<a href="%7B%7B%20route('dashboard.october.interests')%20%7D%7D" class="a-reset">
  <div class="{{ Route::is('dashboard.october.interests') ? 'active sidebar-link' : 'sidebar-link' }} py-2">
    <i class="fa-solid fa-envelope px-2"></i>
    <h6 class="nexa-bold text-white d-inline-block">iCity October</h6>
  </div>
</a>

<a href="%7B%7B%20route('dashboard.october.chillout.interests')%20%7D%7D" class="a-reset">
  <div class="{{ Route::is('dashboard.october.chillout.interests') ? 'active sidebar-link' : 'sidebar-link' }} py-2">
    <i class="fa-solid fa-envelope px-2"></i>
    <h6 class="nexa-bold text-white d-inline-block">Chillout October</h6>
  </div>
</a>

<a href="%7B%7B%20route('dashboard.rashikma.interests')%20%7D%7D" class="a-reset">
  <div class="{{ Route::is('dashboard.rashikma.interests') ? 'active sidebar-link' : 'sidebar-link' }} py-2">
    <i class="fa-solid fa-envelope px-2"></i>
    <h6 class="nexa-bold text-white d-inline-block">Ras El Hikma</h6>
  </div>
</a>

? 注意事项与增强建议：

• ✅ 命名一致性：确保 Route::is('xxx') 中的路由名称与 routes/web.php 中定义的 name() 完全一致（如 Route::get(...)->name('dashboard.newcairo.interests')）；
• ⚠️ 避免冗余嵌套：你原始代码中存在 ... 的非法嵌套结构（HTML 不允许 嵌套 ），请删除外层无意义的 ，只保留每个链接一个语义清晰的 标签；
• ? CSS 补充：确保你的 CSS 中定义了 .active 的样式，例如：

  .sidebar-link.active {
    background-color: #7A651D !important; /* 比基础色更深或更亮 */
    border-left: 4px solid #FFD700;
  }

• ? 进阶可选：若需支持路由参数匹配（如 /dashboard/{city}/interests），可使用 Route::currentRouteNamed('dashboard.*.interests') 或 request()->routeIs('dashboard.*.interests') 实现通配匹配。

这种方法简洁、可靠、零 JS 依赖，是 Laravel 官方推荐的最佳实践。服务端一次判断，前端永久生效，彻底告别“点击高亮、刷新消失”的困扰。