页面刷新后菜单高亮消失需手动匹配url路径:清洗前后斜杠后严格比对pathname与href,三级菜单需同步展开父级dt并添加layui-nav-itemed类,且逻辑须在navbar.done回调中执行。

页面刷新后菜单高亮消失,是因为 layui-this 类只在 JS 运行时添加,刷新即清空。必须手动读取当前 URL 路径,精确匹配菜单项的 href,再动态添加类并恢复父级展开状态。
统一处理路径斜杠再比对
直接用 window.location.pathname(如 /admin/user/list)和菜单 href(如 user/list)全等比较会失败,因首尾斜杠不一致。需先清洗:
- 用
location.pathname.replace(/^\/+|\/+$/g, '')去掉开头和结尾所有斜杠 - 对每个菜单项的
href同样执行.replace(/^\/+|\/+$/g, '') - 再用
===严格比对,避免模糊匹配(比如user错配到user/list)
三级菜单要同步展开父级
仅给匹配的 <dd></dd> 加 layui-this 不够,父级 <dt></dt> 必须有 layui-nav-itemed 才能显示子菜单:
- 找到匹配的
<a></a>或<dd></dd>元素 - 向上查找最近的
<dl></dl>,再找其内部的<dt></dt>,添加layui-nav-itemed - 或简化写法:
$(target).closest('dl').find('dt').addClass('layui-nav-itemed')
必须在 DOM 渲染完成后再执行匹配
如果是动态加载菜单(如通过 navbar.set({ url: 'menu.json' })),匹配逻辑不能写在 $(document).ready() 里:
- 要放在
navbar.done回调中,确保菜单 HTML 已插入 DOM - 否则遍历不到新生成的
<dd></dd>或<dt></dt>,匹配失效 - 注意:
url值是相对路径,浏览器按当前页 URL 拼接,容易 404,建议用绝对路径或确认部署结构
忽略查询参数和哈希值
URL 中的 ?a=1 或 #section 不影响页面归属,匹配前应剔除:
- 推荐提取干净路径:
location.href.split('//')[1].split('?')[0].split('#')[0] - 或更稳妥地用
new URL(location.href).pathname,再清洗斜杠 - 避免用
startsWith(),除非你明确接受前缀匹配(如/user匹配/user/list),否则建议全路径精确匹配











