layui怎么实现点击侧边栏动态加载右侧内容-Layui教程-PHP中文网

Layui动态加载右侧内容需手动管理生命周期：用事件委托绑定菜单点击并阻止默认跳转，load后手动初始化组件、防缓存加时间戳、加loading锁防重复请求，避免iframe除非需沙箱隔离。

layui怎么实现点击侧边栏动态加载右侧内容

点击侧边栏菜单时，`router.push` 或 `location.hash` 不生效？

Layui 本身不内置前端路由，所谓“动态加载右侧内容”，本质是监听菜单点击、替换容器 HTML 或发起 AJAX 请求。常见失效原因是：没阻止 a 标签默认跳转，或事件绑定在动态生成的 DOM 上却用了直接绑定（没用事件委托）。

实操建议：

给侧边栏 ul.layui-nav 下的每个 li 或 a 加 data-url 属性，比如 用户管理

用 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，改用「模板 + 渲染分离」——只放，JS 全部抽到主页面统一管理
如果右侧用了 form 表单，记得在 load 后补一句 layui.form.render()

如何避免重复加载、缓存旧数据？

浏览器可能对相同 URL 的 $.load() 做缓存，尤其在 IE 或开启强缓存时；另外，快速连点菜单会导致请求并发、DOM 覆盖错乱。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

实操建议：

给 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;
  });
});