JavaScript 如何做前端路由

在日常刷网页时，你有没有发现一个神奇的细节：点击电商网站的“商品分类”，地址栏的网址变了，但页面没刷新；切换博客的不同文章，地址跳转到对应链接，页面内容直接更新，完全不用重新加载。这背后藏着前端的核心技术之一——前端路由，而JavaScript就是实现它的关键工具。

什么是前端路由？和后端路由有啥不一样？

先从生活例子理解：后端路由就像小区的物业前台，你要找某户业主，得先跟前台说清楚“几号楼几单元”，前台帮你找到对应住户后，你得重新走一遍小区大门再进去，相当于整个流程要“重新加载”；前端路由则是小区里的智能门禁，你在小区内点不同的单元门，只是在内部切换，不用再出小区重新进门，地址栏的链接变了，页面内容却不用整体刷新。

简单说，前端路由的核心是在不刷新页面的前提下，让用户切换不同内容，同时改变浏览器地址，而JavaScript就是实现这个逻辑的“导演”，帮我们控制地址和页面内容的对应关系。

JavaScript实现前端路由的两种核心方式

用JavaScript做前端路由，目前主要靠两种浏览器自带的API，都是原生功能，不用额外装插件，新手也能快速上手。

第一种是URL哈希路由，也是最容易理解的方式。哈希就是地址里带“#”的部分，比如https://你的网站#商品页，#后面的内容就是路由标识，而且这个部分的变化不会触发页面刷新。我们可以监听浏览器地址的哈希变化，比如用户点了“商品页”，就把#后面改成#商品页，同时把页面内容换成商品模块；点“博客页”就改成#博客页，切换成文章内容。

举个生活化的例子：你把家里的客厅、卧室、书房都标上“#客厅”“#卧室”“#书房”，你在客厅时地址带#客厅，切换到卧室只要说“切到#卧室”，不用重新装修整个房子，只是换个房间用。这种方式的好处是兼容性好，老浏览器也支持，缺点是#的形式有点丑，看起来不如干净的URL高级。

第二种是History API路由，是现在更主流的方式，能实现干净的URL，比如https://你的网站/商品页，没有#。这个API是让JavaScript直接操作浏览器的历史记录和地址栏，比如用history.pushState()就能直接把地址改成/商品页，同时更新页面内容。

不过这里有个小问题：如果用户直接在浏览器输入https://你的网站/商品页，浏览器会尝试去服务器找叫“商品页”的文件，找不到就会报错。所以用这种方式时，需要后端配合设置“兜底规则”——不管用户输入什么路径，都返回同一个网站的首页，让前端路由自己处理路径，就像你在小区里随便报一个单元号，物业都给你转到小区入口，让智能门禁处理。

日常开发常用的简化工具

如果直接用原生JavaScript写路由，要处理监听、错误兼容等细节，有点麻烦，所以前端框架里都封装了现成的路由库，比如Vue的Vue Router、React的React Router，它们本质上就是用刚才说的两种API做的，只是帮我们省了很多重复代码。

比如你做一个个人博客，用Vue Router只要写几行配置，就能把“/文章1”对应到第一篇文章，“/文章2”对应到第二篇，不用自己写监听哈希或History的代码，只需要告诉库“这个路径对应什么内容”就行，就像找外卖软件，不用自己联系商家，只要点对应商家的名字，软件就帮你处理后续流程。

前端路由现在几乎是所有单页应用（SPA）的基础，从电商平台到管理系统都离不开它，而JavaScript作为核心实现工具，把复杂的地址和页面对应逻辑，变成了简单的可操作代码，让我们能轻松实现流畅的页面切换体验。