17370845950

JavaScript实现SPA的核心是利用history.pushState修改URL、监听popstate事件响应导航、动态匹配路由并更新DOM，需拦截a标签点击、服务端配置兜底返回index.html。

用 JavaScript 实现路由和单页应用（SPA），核心是监听 URL 变化、按需加载内容、避免整页刷新。不需要框架也能做到，关键是掌握 history.pushState、popstate 事件和 DOM 动态更新。

监听地址栏变化，不刷新页面

浏览器提供 window.history API 来操作导航记录，配合 pushState 和 replaceState 可以修改 URL 而不触发跳转。

• 点击链接时阻止默认行为，调用 history.pushState(state, title, url) 更新地址栏
• 监听 window.addEventListener('popstate', handler) 捕获浏览器前进/后退动作
• state 参数可传入任意对象，用于保存页面状态（比如当前页码、筛选条件）

定义路由规则并匹配路径

把 URL 路径映射到对应视图或处理函数，可用简单正则或更清晰的键值对方式：

• 例如：{ '/': homePage, '/about': aboutPage, '/posts/:id': postDetail }
• 解析 location.pathname，逐条比对：对带参数的路径（如 /posts/123），用正则提取 id 并传给渲染函数
• 推荐用 URLPattern（现代浏览器支持）做匹配，语义清晰且支持命名组

动态渲染内容，管理视图生命周期

每次路由切换，应卸载旧组件、加载新内容、更新 DOM，而不是简单地 innerHTML = ...：

• 为每个路由准备一个渲染函数，返回 HTML 字符串或直接操作 DOM 节点
• 如果用了模块化结构，可配合 import() 动态导入对应模块（实现代码分割）
• 注意清理副作用：取消未完成的请求、移除事件监听器、暂停定时器等

处理链接点击和 SEO 基础适配

用户点击 时，默认会刷新页面——需要统一拦截：

• 给根容器（如 #app）委托绑定 click 事件，判断目标是否为站内链接
• 匹配成功后调用 pushState + 手动渲染，再 event.preventDefault()
• 服务端需配置所有前端路由都返回同一份 HTML（如 index.html），否则直接访问子路径会 404

基本上就这些。不复杂但容易忽略细节，比如没监听 popstate 就无法响应后退键，或者没拦截 a 标签导致意外刷新。写个小 demo 跑通一次，后面扩展功能（嵌套路由、守卫、懒加载）就顺了。