你有没有发现，现在很多网站点来点去，页面一直在变，但浏览器地址栏的链接也在变，而且整个页面却不会刷新？比如你在用某宝、某音的时候，切换页面特别顺滑，没有那种“白屏一下再加载”的感觉。这背后，其实就有前端路由在起作用。
前端路由到底是个啥？
简单来说，前端路由就是让网页在不刷新的情况下，“假装”跳转到了不同的页面。它不是靠服务器返回新页面，而是由浏览器里的 JavaScript 来控制显示哪个内容。
以前我们访问一个网址，比如 example.com/about，浏览器会向服务器发请求，服务器返回一个完整的 about.html 页面，整个页面就刷新了。但现在，很多网站只加载一次主页面（比如 index.html），之后的所有“页面切换”都由前端代码来处理——这就是前端路由的逻辑。
举个生活中的例子
想象你在一个自助餐厅，服务员端上来一个大盘子，上面有前菜、主食、甜点，但一开始全盖着盖子。你想吃甜点，不用再去厨房点一份新菜，只要服务员把甜点那层盖子打开就行。这个“开盖子”的动作，就像前端路由根据 URL 显示对应的内容模块，而不用重新上一整桌菜。
它是怎么实现的？
现代前端框架比如 Vue、React 都支持前端路由。它们通过监听 URL 的变化，来决定显示哪个组件。关键在于两种模式：hash 模式和 history 模式。
hash 模式是利用 URL 中的 # 号后面的部分，比如 example.com/#/home。# 后面的内容变了，页面不会刷新，JavaScript 却能监听到。早期很多网站都用这种方式。
window.addEventListener('hashchange', function() {
const page = window.location.hash.slice(1); // 获取 # 后的内容
if (page === '/home') {
showHomePage();
} else if (page === '/profile') {
showProfilePage();
}
});后来 HTML5 提供了 History API，可以用 pushState 和 replaceState 直接修改 URL 而不刷新页面，这就有了更干净的地址，比如 example.com/users。不过这种模式需要服务器配合，避免用户直接访问时 404。
前端路由的好处
最大的好处就是快。页面不用反复加载资源，切换像 App 一样流畅。用户体验提升明显，尤其在网络慢的时候，优势更突出。
另外，前后端分离更彻底。后端专注提供数据接口，前端自己管理页面结构和跳转，开发效率也更高。
当然，它也有小缺点，比如对 SEO 不太友好（搜索引擎爬虫可能抓不到内容），还有初期加载可能稍大一点。但现在这些都有解决方案，比如服务端渲染（SSR）。
你现在每天刷的短视频、看的在线文档、用的后台管理系统，基本都用了前端路由。它已经成了现代网页开发的标配技能。