Laravel侧边栏高亮异常：路由未变更时菜单不高亮

问题根源 #

你当前的侧边栏高亮是服务器端渲染时一次性生成的，仅在路由切换、页面刷新时重新计算active类。如果在dashboard路由页面内点击不触发页面刷新的按钮（比如带href="#"的下拉按钮），若存在前端默认行为或脚本误操作，就会导致已渲染的active类丢失，而服务器端无法实时更新前端DOM状态。

针对性解决方案 #

方案1：修复下拉按钮的默认行为 #

你页面中下拉按钮的href="#"会触发锚点跳转的默认行为，可能导致前端状态异常，直接修改为无跳转的空链接：

<!-- 原代码 -->
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">

<!-- 修改后 -->
<a href="javascript:void(0)" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    <img src="{{ asset('assets/images/edit-2.png') }}" alt="Edit">
</a>

这样可以避免不必要的页面锚点跳转，防止active类被意外移除。

方案2：前端JS维护高亮状态 #

如果需要更健壮的适配（比如页面内锚点变化、前端交互较多的场景），在服务器端渲染基础上，添加前端脚本确保高亮状态始终正确：

1. 给侧边栏菜单链接添加路由标识：

<a class="{{ $activeRoutes['dashboard'] ? 'active' : '' }}" href="{{ route('dashboard') }}" data-route="dashboard">
    <img class="image-default" src="{{ asset('/assets_admin/images/menu-icon/dashboard.svg') }}" alt="Icon">
    <img class="image-hover" src="{{ asset('/assets_admin/images/menu-icon/dashboard-hover.svg') }}" alt="Icon"> 
    Dashboard
</a>

2. 在页面底部添加JS代码：

// 从Laravel获取当前路由名称
const currentRouteName = "{{ request()->route()->getName() }}";

function activateCurrentMenu() {
    // 清除所有菜单的active类
    document.querySelectorAll('.sidebar-menu-list a').forEach(link => {
        link.classList.remove('active');
    });
    // 给当前路由对应的菜单添加active类
    const targetLink = document.querySelector(`.sidebar-menu-list a[data-route="${currentRouteName}"]`);
    if (targetLink) {
        targetLink.classList.add('active');
    }
}

// 页面加载时初始化
document.addEventListener('DOMContentLoaded', activateCurrentMenu);
// 监听锚点变化事件（比如点击带#的链接时）
window.addEventListener('hashchange', activateCurrentMenu);

这段脚本会在页面加载和锚点变化时，强制将当前路由对应的菜单设为高亮，彻底解决同页面操作导致的高亮丢失问题。

方案3：强化服务器端判断（可选） #

如果怀疑服务器端路由判断存在异常（概率较低），可以补充路径判断来确保逻辑严谨：

@php
    $activeRoutes = [
        'dashboard' => request()->routeIs('dashboard') || request()->path() === 'dashboard',
    ];
@endphp

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