使用 History API 和事件机制实现无框架前端路由，通过 pushState/replaceState 修改 URL 并监听 popstate 响应导航；构建轻量路由引擎，用正则预编译匹配路径并支持动态参数；结合懒加载、节流处理、DOM 缓存优化性能；拦截内部链接跳转避免刷新，保留原生锚点行为；最终实现高性能、低耦合、可复用的路由系统。
构建一个无框架依赖的高性能前端路由系统，关键在于利用原生浏览器能力实现 URL 变化监听和视图切换，同时保持轻量、快速响应和良好的可维护性。核心思路是结合 History API 与事件机制，避免依赖 React Router、Vue Router 等框架级方案。
使用 History API 实现无刷新跳转
现代浏览器提供的 History API（pushState、replaceState 和 popstate）是实现前端路由的基础。它允许你在不重新加载页面的情况下修改 URL。
- pushState()：添加新记录到历史栈，触发前进后退时可通过 popstate 监听
- replaceState()：替换当前历史记录，不会增加新条目
- popstate 事件：用户点击浏览器前进/后退按钮时触发，用于响应路由变化
示例代码：
const navigate = (url) => {history.pushState({}, '', url);
router();
};
window.addEventListener('popstate', () => {
router();
});
设计轻量级路由匹配引擎
一个高效的路由系统需要快速匹配当前路径并执行对应逻辑。你可以用对象存储路径模式与回调函数的映射关系。
立即学习“前端免费学习笔记（深入）”；
- 支持动态参数（如 /user/:id）
- 使用正则预编译提升匹配速度
- 按顺序注册，优先匹配更具体的规则
实现方式示例：
citySHOP 多用户商城
下载
citySHOP是一款集CMS、网店、商品、系统，管理更加科学快速；全新Jquery前端引擎；智能缓存、图表化的数据分析，手机短信营销；各种礼包设置、搭配购买、关联等进一步加强用户体验；任何功能及设置都高度自定义；MVC架构模式，代码严禁、规范；商品推荐、促销、礼包、折扣、换购等多种设置模式；商品五级分类，可自由设置分类属性；商品展示页简介大方，清晰，图片自动放大，无需重开页面；商品评价、咨询分开
const addRoute = (path, handler) => {
// 将 :param 转为正则捕获组
const regex = new RegExp('^' + path.replace(/:[^\/]+/g, '([^\/]+)') + '$');
routes.push({ path, regex, handler });
};
const router = () => {
const path = window.location.pathname;
for (const route of routes) {
const match = path.match(route.regex);
if (match) {
const params = {};
const keys = route.path.match(/:([a-zA-Z]+)/g)?.map(k => k.slice(1));
if (keys) {
keys.forEach((key, i) => params[key] = match[i + 1]);
}
route.handler(params);
break;
}
}
};
优化性能的关键策略
即使没有框架，也要防止重复渲染或无效计算。
- 懒加载视图模块：配合 import() 动态加载组件，减少初始体积
- 节流初始化逻辑：确保每次路由变化只执行一次处理函数
- 缓存已渲染内容：对频繁切换的页面可保留 DOM 片段，提升回访体验
- 避免内存泄漏：清理旧事件监听器或定时器，尤其在“页面级”钩子中
支持锚点跳转与外部链接拦截
完整路由系统需处理所有导航行为。
- 监听全局 click 事件，拦截 类链接，调用 pushState 避免刷新
- 识别 hash 链接（如 #section），交由原生处理或自定义平滑滚动
- 排除 target="_blank" 或外域链接，保证兼容性
示例：
document.addEventListener('click', (e) => {if (e.target.matches('a[href]')) {
const href = e.target.getAttribute('href');
if (href.startsWith('/') && !href.includes('//')) {
e.preventDefault();
navigate(href);
}
}
});
基本上就这些。一个高性能、无框架依赖的前端路由不需要复杂抽象，重点是精准控制生命周期、高效匹配路径，并充分利用浏览器原生能力。只要结构清晰，后期也能轻松集成进任意框架或微前端环境。
