HTML5中“页面切换”实为DOM切换，核心是JS控制显隐、内容替换或URL状态更新；需用history.pushState+popstate实现无刷新路由，配合服务端fallback、本地存储状态及CSS动画优化。
HTML5 里没有“页面切换”这回事，只有 DOM 切换
浏览器标签页里所谓“同一界面切换”，本质是用 JS 控制元素显隐、替换内容或更新 URL 状态，不是跳转新页面。直接写 window.location.href 或 <a href="xxx"></a> 就脱离了“同一界面”前提。
常见错误现象：404（刷新后路由失效）、history.pushState 后返回空白、CSS 动画卡顿、SEO 内容不被爬虫抓取。
- 用
display: none切换多个<section></section>最简单，但 DOM 一直存在，内存占用高 - 用
innerHTML或replaceChildren()替换内容更轻量，但事件监听器需重绑 - 若要支持浏览器前进/后退，必须配合
history.pushState()+popstate事件
用 history.pushState + popstate 实现无刷新路由
这是单页应用（SPA）最基础的路由机制，不依赖框架也能跑。关键不是“怎么跳”，而是“跳了之后怎么响应”。pushState 不触发页面加载，只改地址栏和历史栈；真正干活的是监听 popstate 后手动更新视图。
容易踩的坑：pushState 的第三个参数（URL）必须是同源路径，不能是绝对外链；popstate 在页面首次加载时不会触发，需手动初始化一次视图。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
history.pushState({page: 'detail'}, '', '/detail')—— 第二个参数是 title（基本被忽略），别填空字符串以外的值 - 监听用
window.addEventListener('popstate', e => { render(e.state.page) })，e.state是你传进去的状态对象 - 服务端必须配置：所有前端路由都 fallback 到
index.html，否则刷新就 404
localStorage 或 sessionStorage 保存切换状态
用户切到“设置”页再关掉浏览器，重新打开还想停在“设置”页？靠 URL 路径还不够，得存状态。这时候不用上复杂状态管理，原生存储就够用。
注意兼容性：localStorage 永久存在，sessionStorage 关闭标签页即清空；两者都受同源策略限制，且存的是字符串 —— 对象得先 JSON.stringify()。
- 切换时存：
localStorage.setItem('lastView', 'profile') - 初始化时读：
const last = localStorage.getItem('lastView') || 'home'，再渲染对应模块 - 不要存大量数据，单条上限约 5MB，但实际建议控制在几十 KB 内，避免阻塞主线程
CSS 过渡动画要绑定到具体元素，不是靠 JS 控制类名就完事
加个 fade-in 类看起来动了，但若元素是 display: none 状态，动画根本不会触发 —— 因为它已脱离渲染流。过渡生效的前提是元素在文档流中且属性可动画（如 opacity、transform）。
典型错误：.view { transition: all 0.3s } 配合 display: none/block，结果没动画。
- 正确做法：用
opacity: 0+visibility: hidden控制显隐，再配transition: opacity 0.2s, visibility 0.2s - 若用
transform: translateX(100%)做侧滑，记得给容器加overflow: hidden，否则滚动条会闪一下 - 动画期间避免操作
offsetHeight等触发强制同步布局，否则卡顿
真正难的不是切，是切完怎么让状态可回溯、内容可恢复、动画不破相、刷新不丢上下文。这些细节堆起来，才叫“同一界面”。
