单页应用通过History API实现无刷新跳转，结合路由守卫控制导航。使用pushState和replaceState操作历史记录，监听popstate响应浏览器前进后退，拦截链接点击实现动态渲染。路由表映射路径与组件，可构建简易路由系统。路由守卫在跳转前验证权限、提示未保存数据或加载异步资源，确保安全跳转。前后置守卫结合History API，提升用户体验，使SPA兼具流畅性与状态安全性，适用于小型项目或理解框架路由原理。
在现代前端开发中，单页应用（SPA）已成为主流。为了实现页面跳转而无需刷新，JavaScript 提供了 History API 来管理浏览器历史记录，并结合路由系统控制导航行为。同时，路由守卫机制可以确保用户在跳转前满足特定条件，比如权限验证或表单保存确认。
History API：实现无刷新跳转的核心
History API 是浏览器提供的原生接口，允许开发者操作浏览器会话历史记录，而不会重新加载页面。
关键方法：
- history.pushState(state, title, url)：向历史栈添加一条新记录，同时改变 URL，但不触发页面刷新。
- history.replaceState(state, title, url)：替换当前历史记录项，不会新增历史条目。
- window.onpopstate：当用户点击前进/后退按钮时触发，可用于响应历史记录变化。
例如，当用户点击“个人中心”时，调用 pushState 更新 URL 为 /profile，然后动态渲染对应组件，整个过程无需刷新页面。
手动实现简易路由系统
基于 History API 可以构建一个轻量级的客户端路由。
基本思路是监听 URL 变化并匹配对应视图：
- 拦截链接点击事件，阻止默认跳转，改用 pushState 更新 URL 并渲染目标页面。
- 绑定 popstate 事件，在用户使用浏览器导航时重新渲染对应视图。
- 维护一个路由表，将路径映射到处理函数或组件。
这样就能实现类似 Vue Router 或 React Router 的基础功能，适合小型项目或学习原理。
路由守卫：控制导航流程
路由守卫用于在导航发生前或后执行逻辑判断，决定是否允许跳转。
常见应用场景包括：
- 用户未登录时，阻止访问后台页面，重定向至登录页。
- 表单有未保存数据时，弹出提示确认是否离开。
- 加载异步数据完成后才渲染目标页面。
实现方式通常是在路由跳转前调用一个守卫函数，该函数可返回布尔值或 Promise。若拒绝跳转，则保持当前页面不变。
结合使用提升用户体验
将 History API 与路由守卫结合，既能实现流畅的页面切换，又能保证应用状态安全。
例如，在调用 pushState 前先执行全局守卫，检查权限和脏数据。只有通过验证才更新 URL 和视图。同时在 popstate 中也加入守卫逻辑，防止用户通过浏览器按钮绕过校验。
这种模式让 SPA 更接近原生应用的体验，同时保留 Web 的可分享特性。
基本上就这些。掌握 History API 和路由守卫，有助于深入理解前端路由机制，也能在没有框架的情况下构建可控的导航系统。
