HTML怎样实现简单的单页应用？

location.hash是最轻量、零依赖的单页切换入口，兼容所有浏览器，通过hashchange监听变化实现无刷新路由，需手动注册事件并首次主动处理，视图切换推荐用CSS class控制显隐，确保URL与视图状态严格同步。

location.hash 是最轻量、零依赖的单页切换入口，不需要框架、不发请求、兼容所有浏览器，适合静态页或原型验证。

用 hashchange 监听 URL 变化

浏览器地址栏中 #home、#about 这类片段不会触发页面刷新，但会触发 hashchange 事件。这是原生 SPA 的底层支点。

• 必须手动监听：在页面加载后立即注册 window.addEventListener('hashchange', handler)
• 首次加载时 hashchange 不会自动触发，需主动调用一次 handler() 或检查 location.hash
• 注意 IE8+ 支持，但 IE7 及更早版本不支持 —— 如果要兼容，得 fallback 到定时轮询 location.hash
• hash 值含 #，取真实路径要用 location.hash.slice(1) 或 location.hash.replace(/^#/, '')

切换视图靠 display 或 classList

把每个“页面”写成独立 <div>，通过 CSS 控制显隐比操作 DOM 更快也更可控。

• 推荐用 class 控制状态：.view { display: none; } + .view.active { display: block; }
• 避免直接改 style.display，否则容易被内联样式锁死，后续 JS 难以覆盖
• 切换前先清空所有 .active，再给目标元素加，防止多个视图同时显示
• 如果视图内容较多，可延迟加载（比如首次访问才 innerHTML = template），减少首屏体积

pushState 和 replaceState 的实际限制

想用干净路径（如 /about）代替 #about？可以，但代价是必须配服务端支持，否则刷新 404。

• pushState(null, '', '/about') 能改 URL，但不发请求 —— 内容还得你手动渲染
• 用户点浏览器后退/前进时，会触发 popstate 事件，但该事件**不会**在 pushState 调用时触发
• 服务端必须将所有路径都返回同一份 index.html，否则刷新就 404；Nginx 配置示例：try_files $uri $uri/ /index.html;
• 开发阶段用 file:// 协议直接双击打开 HTML 文件时，pushState 会报错 —— 必须起本地服务（如 npx serve）

真正容易被忽略的是：**URL 状态和视图状态必须严格同步**。比如用户从 #detail?id=123 切到 #list 后又点浏览器后退，你得能还原出那个 id=123 并重新拉取数据 —— 这意味着 hash 解析逻辑不能只写在初始化里，而要封装成可复用函数，且每次 hashchange 或 popstate 都要走一遍。