前端路由通过监听URL变化实现无刷新视图切换，核心为hash模式与history模式。1. hash模式利用#后片段变更触发hashchange事件，不引起页面重载；2. history模式借助pushState/replaceState修改路径并监听popstate实现更优URL结构，需服务端配合返回index.html避免404；3. 通过简易代码示例可见其响应流程：根据location.hash匹配路由表并更新DOM内容；4. 在Vue、React等框架中由Vue Router或React Router封装底层逻辑，支持声明式配置、嵌套路由、懒加载及路由守卫，实现高效组件化导航；5. 本质是“拦截URL变化+动态渲染”，使单页应用具备多视图形态与类原生交互体验。
前端路由是单页应用（SPA）的核心机制之一，它让页面在不刷新的情况下实现视图切换，模拟多页网站的导航体验。其核心原理是监听 URL 的变化，并根据不同的路径动态渲染对应的内容，而无需向服务器请求新页面。
基于 URL 变化的两种实现方式
前端路由主要依赖两种浏览器特性来实现：hash 模式和 history 模式。
Hash 模式
利用 URL 中 # 后面的部分（hash 值）进行路由控制。hash 的改变不会触发页面重新加载，且能被浏览器记录到历史栈中。
立即学习“Java免费学习笔记（深入）”；
- 监听 window 的 hashchange 事件
- 读取 location.hash 获取当前路径
- 根据路径匹配对应的组件或视图并渲染
例如：http://example.com/#/user，当用户访问 #/user 时，JavaScript 捕获该变化并加载用户页面模块。
History 模式
使用 HTML5 提供的 History API（pushState、replaceState）操作浏览器历史记录，实现更“干净”的 URL。
- 通过 history.pushState() 添加新记录而不刷新页面
- 通过 popstate 事件监听浏览器前进后退
- 服务端需配合，将所有路由指向 index.html，避免 404 错误
例如：http://example.com/user，URL 看起来像传统多页网站，实际仍由前端控制渲染逻辑。
简易路由实现示例
一个最简单的 hash 路由可以这样写：
const routes = {
'#/': '首页内容',
'#/about': '关于页面',
'#/user': '用户中心'
};
function onRouteChange() {
const content = document.getElementById('content');
const path = location.hash || '#/';
content.innerHTML = routes[path] || '页面不存在';
}
window.addEventListener('hashchange', onRouteChange);
window.addEventListener('load', onRouteChange);
这段代码在页面加载和 hash 变化时更新显示内容，体现了路由的基本响应流程。
与框架结合的工作机制
在 React、Vue 等框架中，前端路由通过组件化方式进一步封装。以 Vue Router 或 React Router 为例：
- 定义路由表，映射路径与组件
- 路由监听器自动响应 URL 变化
- 触发视图更新，渲染对应组件
- 支持嵌套路由、懒加载、路由守卫等高级功能
这些库屏蔽了底层细节，开发者只需声明式配置即可完成复杂导航逻辑。
基本上就这些。前端路由的本质就是“拦截 URL 变化 + 动态渲染”，让单个 HTML 页面拥有多个视图形态，从而构建出流畅的类原生应用体验。
