前端路由的核心是不刷新页面改变url并响应视图，依赖history api（pushstate/replacestate）和popstate事件监听，需手动初始化匹配当前pathname。
前端路由的核心是不刷新页面的前提下，改变 URL 并响应对应视图。它不依赖服务端，靠浏览器的 History API（如 pushState、replaceState）和 URL 变化监听（如 popstate 事件）来实现。
监听 URL 变化：用 popstate 捕获前进/后退
用户点击浏览器前进/后退按钮，或调用 history.pushState()、history.replaceState() 时，会触发 popstate 事件。这是响应路由跳转的关键入口。
注意：popstate 不会在 pushState 或 replaceState 调用时立即触发（除非是用户手动导航），只在历史栈切换时触发。
- 给
window绑定popstate事件监听器 - 在回调中读取
location.pathname或event.state判断当前路径 - 根据路径渲染对应组件或内容
修改 URL 且不刷新：用 pushState/replaceState
替代传统的 location.href = '/xxx'（会刷新），用 History API 实现无刷新跳转：
立即学习“Java免费学习笔记（深入）”；
-
history.pushState(state, title, url)：添加新记录到历史栈（支持前进/后退） -
history.replaceState(state, title, url)：替换当前历史记录（不新增） -
state是可选对象，可用于存储路由相关数据（如组件参数），后续在popstate事件中通过event.state获取 -
title目前大多数浏览器忽略，传空字符串即可 -
url必须同源，否则报错
处理初始加载和直接访问：解析当前 pathname
页面首次打开或用户直接输入 URL（如 https://site.com/user），不会触发 popstate，需主动读取 location.pathname 初始化路由。
- 在脚本启动时立即执行一次路由匹配逻辑
- 建议封装为一个
router.init()或handleRoute()函数，供初始化和popstate共用 - 可结合
hashchange（用于 hash 模式）或统一用pathname（history 模式）
简单手写一个基础路由示例
以下是最简可用的 history 模式路由核心逻辑：
const routes = {
'/': () => console.log('首页'),
'/user': () => console.log('用户页'),
'/post': () => console.log('文章页')
};
function handleRoute() {
const path = location.pathname;
(routes[path] || routes['/'])();
}
function goTo(path) {
history.pushState({}, '', path);
handleRoute();
}
window.addEventListener('popstate', handleRoute);
handleRoute(); // 初始化
实际项目中可进一步封装成类、支持参数解析（如 /user/:id）、嵌套路由、懒加载等，但底层离不开这三块：监听变化、修改历史、初始化匹配。
基本上就这些。不复杂但容易忽略初始化和 state 的合理使用。
