使用 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）
- 使用正则预编译提升匹配速度
- 按顺序注册，优先匹配更具体的规则
实现方式示例：
const routes = [];
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 事件，拦截 <a href=”/xxx”> 类链接，调用 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);
}
}
});
基本上就这些。一个高性能、无框架依赖的前端路由不需要复杂抽象，重点是精准控制生命周期、高效匹配路径，并充分利用浏览器原生能力。只要结构清晰，后期也能轻松集成进任意框架或微前端环境。
以上就是如何构建一个无框架依赖的高性能vue react 前端 浏览器 回调函数 懒加载 栈 路由 win vue router gate if for foreach const break 回调函数 栈 Regex map regexp 对象 事件 dom location history href router