Layui动态加载右侧内容需手动管理生命周期：用事件委托绑定菜单点击并阻止默认跳转，load后手动初始化组件、防缓存加时间戳、加loading锁防重复请求，避免iframe除非需沙箱隔离。
点击侧边栏菜单时，router.push 或 location.hash 不生效？
Layui 本身不内置前端路由，所谓“动态加载右侧内容”，本质是监听菜单点击、替换容器 HTML 或发起 AJAX 请求。常见失效原因是：没阻止 a 标签默认跳转，或事件绑定在动态生成的 DOM 上却用了直接绑定（没用事件委托）。
实操建议：
- 给侧边栏
ul.layui-nav下的每个li或a加data-url属性，比如<a data-url="user/list.html">用户管理</a> - 用
layui.jquery（即$）绑定事件，推荐用事件委托：$('.layui-nav').on('click', 'a[data-url]', function(e) { e.preventDefault(); const url = $(this).data('url'); $('#content-container').load(url); }); - 避免用
href="javascript:;"，它可能触发 IE 兼容模式或干扰 history；统一用e.preventDefault()控制
$.load() 加载后，新页面里的 layui 组件（如表格、表单）不渲染？
因为 $.load() 只插入 HTML 片段，不会自动执行其中的 layui.use() 或 layui.form.render()。右侧内容如果是独立模块（含 layui.table.render()），必须手动触发初始化。
实操建议：
- 把右侧页面的 JS 初始化逻辑封装成函数，比如
window.initUserTable = function() { ... }，并在load回调里调用$('#content-container').load(url, function() { if (typeof window.initUserTable === 'function') { window.initUserTable(); } }); - 更稳妥的方式是：右侧 HTML 不写
layui.use，改用「模板 + 渲染分离」——只放<table id="user-table"></table>，JS 全部抽到主页面统一管理 - 如果右侧用了
form表单，记得在 load 后补一句layui.form.render()
如何避免重复加载、缓存旧数据？
浏览器可能对相同 URL 的 $.load() 做缓存，尤其在 IE 或开启强缓存时；另外，快速连点菜单会导致请求并发、DOM 覆盖错乱。
实操建议：
- 给 URL 加时间戳参数防缓存：
url + '?t=' + Date.now()，或全局配置：$.ajaxSetup({ cache: false }); - 加 loading 状态锁，防止重复触发：
let isLoading = false; $('.layui-nav').on('click', 'a[data-url]', function(e) { if (isLoading) return; isLoading = true; const url = $(this).data('url'); $('#content-container').load(url + '?t=' + Date.now(), function() { isLoading = false; }); }); - 不要在
load回调里再调load—— 这会导致嵌套加载失控，右侧内容里若有子菜单，应复用同一套事件委托逻辑，而非重新绑定
用 iframe 替代 load 是否更简单？
可以，但 iframe 是隔离环境：父页的 layui 对象、全局变量、CSS 样式默认进不去子页，子页也无法直接调父页方法（需 window.parent 显式访问）。适合完全独立、无需交互的模块。
实操建议：
- 若选 iframe，侧边栏点击只需改
src：$('#main-iframe').attr('src', url); - 子页面内要调用父页的
layui.layer或刷新表格，得写window.parent.layui.layer.msg(...)，注意跨域限制 - iframe 在移动端易出现滚动冲突、高度自适应难，且 SEO 友好性差；除非业务明确要求沙箱隔离，否则优先用
load+ 手动初始化
