前端路由的核心是在不刷新页面的前提下改变URL并响应不同视图，依赖hash模式（通过#及hashchange事件）或history模式（通过pushState/replaceState及popstate事件）实现SPA的页面切换体验。
前端路由的核心是不刷新页面的前提下，改变 URL 并响应不同视图。它不依赖服务端返回新 HTML，而是靠 JavaScript 动态渲染内容，实现单页应用（SPA）的“页面切换”体验。
前端路由的两种实现方式
现代前端框架（如 Vue Router、React Router）底层都基于浏览器原生 API，主要靠以下两种机制：
-
Hash 模式：利用 URL 中 # 后面的部分（即 hash 值），例如
/#user/123。hash 变化不会触发页面重载，且可通过window.location.hash读取，监听hashchange事件即可捕获变化并更新视图。 -
History 模式：基于 HTML5 的
history.pushState()和history.replaceState()方法，可修改 URL 路径（如/user/123）而不刷新页面；配合popstate事件监听浏览器前进/后退操作。注意：服务端需配置兜底路由，避免直接访问时 404。
一个极简的 history 路由示例
手动实现一个基础版，便于理解原理：
- 用
history.pushState({path: '/about'}, '', '/about')改变地址栏，不刷新 - 监听
window.addEventListener('popstate', e => render(e.state.path)) - 给导航链接加
onclick阻止默认跳转，调用pushState+ 手动渲染 - 首次加载时，用
location.pathname获取初始路径并渲染对应内容
为什么需要前端路由？
单页应用中，整个页面只加载一次 HTML、JS 和 CSS，后续所有“页面”都是 JS 控制 DOM 更新。路由就是用来：
立即学习“Java免费学习笔记（深入）”；
- 把不同的 URL 映射到对应的组件或视图逻辑
- 保持浏览器地址栏与当前界面状态一致（支持书签、分享、前进后退）
- 配合懒加载、路由守卫、嵌套路由等增强体验和控制力
基本上就这些。核心不是框架有多复杂，而是理解 hash 或 history 如何被 JS 拦截和响应——剩下的就是匹配路径、渲染组件、管理状态的事了。
