根本原因是url为浏览器发起的相对路径请求，如页面URL为/admin/user/list时，../layui/nav2.json会解析为/admin/lauyi/nav2.json而404；应改用绝对路径如"/static/menu.json"或后端接口/api/menu配合layui.jquery.get()获取数据后调用navbar.set({data:menuData})并显式render。
layui.navbar.set() 的 url 参数为什么总 404
根本原因是 url 是浏览器发起的相对路径请求，不是服务端解析的路径。比如当前页面 url 是 /admin/user/list，而你写 navbar.set({ url: "../layui/nav2.json" })，浏览器实际请求的是 /admin/lauyi/nav2.json（注意路径跳转后拼错），而不是你预期的根目录下的 /layui/nav2.json。
更稳妥的做法是：用绝对路径或统一接口。
- 推荐写成
url: "/static/menu.json"（前提是文件放在 Web 根目录的static下） - Spring Boot 项目要把
nav2.json放进src/main/resources/static/才能被 HTTP 直接访问 - 开发时用
file://协议打开 HTML 会触发 CORS，必须起本地服务（如 Nginx、webpack-dev-server 或 Spring Boot 内置 Tomcat）
如何手动加载 JSON 并传给 navbar.set()
绕过 url 自动请求，改用 layui.jquery.get() 主动取数据再调用 navbar.set({ data: [...] })，能完全控制错误处理、token 携带和路径逻辑。
示例代码片段：
layui.jquery.get('/api/menu', { token: layui.data('layuiAdmin').token })
.done(function(res) {
if (res.code === 0) {
navbar.set({ data: res.data });
// 注意：此时需手动渲染，因为 set 不自动刷新 DOM
layui.navbar.render();
}
})
.fail(function(xhr) {
console.error('菜单加载失败:', xhr.status, xhr.responseText);
});
-
layui.navbar.render()必须显式调用，否则 DOM 不更新 - 如果后端返回结构不匹配 layui 要求的
title/href/children字段，得先做字段映射转换 - 不要把敏感菜单数据存在 localStorage 里直接读取——容易被篡改，权限校验必须在服务端完成
菜单选中状态刷新后丢失怎么办
Layui 不保存激活状态，layui-this 类只靠 JS 运行时添加，页面一刷就清空。
通用解法是根据当前 URL 匹配 href 并手动加类，但要注意细节：
- 别直接比
window.location.pathname和menu.href，前者带开头/，后者常为user/list - 提取当前页“文件名”最稳：
const page = location.pathname.substring(location.pathname.lastIndexOf('/') + 1).split('?')[0]; - 三级菜单要同时处理
<dt></dt>（父级）和<dd></dd>（子项），仅给<dd></dd>加layui-this不够，父级<dt></dt>还得加layui-nav-itemed
多级菜单（如三级）动态渲染要注意什么
Layui 原生 navbar 组件只支持两级，三级及以上必须自己拼 HTML 或改造递归逻辑。
常见做法是用模板字符串或 laytpl 渲染嵌套结构，关键点：
- 后端返回的数据格式必须明确区分层级，比如每个节点带
type: 0/1/2或有parentId字段，前端才能递归构建 - 避免深层递归导致栈溢出，建议限制最大深度（如 4 层），超出则截断并打日志
- 如果用了
laytpl，记得提前加载模板引擎：layui.use('laytpl')，否则laytpl.render()报 undefined
真正麻烦的不是生成菜单，而是点击展开、高亮联动、权限过滤这三者的组合逻辑——稍不注意就会出现「点了没反应」「该展开的没展开」「不该显示的露出来了」。这些细节没跑通前，别急着封装成组件。
