AngularJS启用HTML5模式的作用及SPA路由相关技术疑问

嘿，这个问题问到我当年刚摸SPA路由时的困惑点了！咱们一步步把这些疑问拆解明白：

首先得回溯SPA路由的本质：早期AngularJS默认用哈希模式，利用浏览器对#后面的内容不会发起服务器请求的特性，通过监听hashchange事件来切换对应视图——这也是你之前理解的“所有页面预先加载，URL片段对应展示特定视图”的逻辑。

当你开启html5mode: true后，AngularJS会切换到使用HTML5 History API（核心是pushState和replaceState方法）。这两个API允许我们在不刷新页面的前提下，直接修改浏览器地址栏的URL，同时把这个新URL记录到浏览器的历史栈中。

这时候就需要配置服务器了：因为现在的URL看起来和传统多页应用一样（比如/user/profile而非/#/user/profile），如果用户直接在地址栏输入这个URL或者刷新页面，浏览器会向服务器发起真实请求。但服务器上并没有/user/profile这个物理文件，所以必须让服务器对除了API之外的所有请求都返回SPA的入口文件index.html——你贴的Node.js代码就是干这个的：

app.get('/api', some);
// 更多API路由
// 最后
app.get('*', (req,res,next) => req.sendFile('index.html'));

这是AngularJS（以及所有SPA框架）路由的核心巧思：当你在应用内部点击路由链接时，AngularJS会拦截这个点击事件（阻止浏览器默认的页面跳转行为），然后调用history.pushState()修改地址栏URL，同时根据路由配置渲染对应的视图——整个过程完全在前端完成，根本不会触发服务器请求。

只有两种情况会触发服务器请求：

• 用户直接在地址栏输入URL并回车
• 刷新页面

这也是为什么必须配置服务器兜底返回index.html的原因——否则这两种场景下会得到404错误。

准确来说，是AngularJS利用了浏览器提供的History API能力，带来两个关键好处：

• URL更符合用户习惯，和传统多页应用的URL格式一致，同时对SEO更友好（早期搜索引擎对哈希路径的解析支持有限，现在虽有改进，但美观的URL依然更有优势）。
• 可以正常使用浏览器的前进、后退按钮：pushState会把每个路由状态加入浏览器的历史栈，点击前进/后退时，AngularJS会监听popstate事件，自动切换到对应的视图。

核心逻辑其实和AngularJS的HTML5模式完全一致——都是基于HTML5 History API，只是这些框架把History API作为默认路由方案，不需要像AngularJS那样手动开启：

• React生态里的React Router，默认使用BrowserRouter（基于History API），只有需要兼容极老浏览器时才会用HashRouter。
• Angular 2+默认使用PathLocationStrategy（基于History API），哈希模式是HashLocationStrategy，需要手动配置才会启用。

为什么不需要额外启用？因为这些框架诞生时，HTML5 History API已经被主流浏览器广泛支持，所以直接把最优方案设为默认，省去了开发者手动开启的步骤。而AngularJS诞生更早，当时很多浏览器还不支持History API，所以默认用哈希模式，HTML5模式作为可选功能。

内容的提问来源于stack exchange，提问作者nightmaredevil2010