Layui实现SPA的核心是前端路由+动态内容注入+模块按需初始化；推荐tab+iframe伪SPA或AJAX+$.html()真组件式加载，关键在状态延续、JS复用与事件有效。
Layui 后台实现单页面 SPA（无刷新组件式加载），核心是避免整页 reload、不依赖 iframe 全量重载，而是通过前端路由控制 + 动态内容注入 + 模块按需初始化来达成。官方推荐且最稳定的路径是 tab 页 + iframe，但真正符合“组件式”语义、更轻量可控的方案是 AJAX + $.html() + 手动模块管理。关键不在“有没有刷新”，而在“状态是否延续、JS 是否复用、事件是否有效”。
用 layui.tab + iframe 实现标签化 SPA
这是 LayuiAdmin Pro 和多数企业级后台采用的方式，本质是伪 SPA（DOM 不销毁、JS 环境隔离），但体验接近原生 SPA：
- 左侧菜单项必须带
data-url和data-id，例如：- 订单管理
- 监听
element.on('nav(layui-nav-tree)', ...)，点击时调用element.tabAdd('bodyTab', {id: id, title: title, content: ''}) -
iframe 的 name 必须与 tab 的 lay-id 一致，否则切换时无法聚焦，且父页无法通过
document.querySelector('iframe[name="xxx"]').contentWindow安全通信 - 子页面首次加载后，可通过
window.parent.layui访问父页实例，但建议在iframe.onload后再调用，避免layui is not defined
用 AJAX + $.html() 实现真组件式加载
适合内容结构清晰、交互不复杂、需 SEO 或强 DOM 控制的场景。它把每个模块当作 HTML 片段 + 初始化脚本，由主页面统一调度：
- 后端返回纯内容片段（不含
），例如只返回一个... - 插入前清空并注入：
$('#content').empty().html(data)，再手动触发初始化：layui.table.render({...})、layui.form.render() - 所有事件必须用委托绑定：
$('#content').on('click', '.btn-edit', function(){...})，直接绑定会失效 - 模块 JS 需加防重载标记，例如：
if (!window.hasInitUserTable) { layui.use(['table'], function(){...}); window.hasInitUserTable = true; }
用 layui.url() + hash 路由模拟 SPA 导航
配合浏览器 history API（如 location.hash）可实现 URL 可 bookmark、前进后退不刷新的效果：
- 监听
window.onhashchange，解析layui.url().hash.path获取当前路由路径，如["user", "edit", "123"] - 根据路径匹配预设模块，执行对应加载逻辑（tab 切换或 AJAX 渲染）
- 跳转时用
location.hash = '#/user/list'，不触发刷新，且支持浏览器原生前进/后退 - 注意：hash 变化不会触发页面重载，但需自行维护 tab 激活态或内容区状态
表格等组件的局部刷新要绕开 table.reload()
table.reload() 会重建整个表格实例，丢失滚动位置、选中态、自定义列宽等。正确做法是复用缓存数据：
- 首次渲染后保存实例：
var tableIns = layui.table.render({...}) - 后续更新只改数据：
layui.table.cache[tableIns.config.id] = newData，再调用tableIns.reload({data: newData}) - 或直接操作 DOM 表格体：
$(tableIns.config.elem).next('.layui-table-box').find('.layui-table-body tbody').html(htmlStr)，再调用form.render()处理表单元素
