Angular 2路由useHash: true的作用、取值原因及false时的影响

嘿，我来给你把Angular路由里useHash: true这个配置的方方面面讲清楚，就拿你给出的代码示例RouterModule.forRoot([ ABOUT_ROUTE ], { useHash: true })来说明：

1. useHash: true的使用目的是什么？ #

这个配置的核心是让Angular启用哈希模式路由，主要解决两个关键问题：

• 避免前端路由与服务器路由冲突：浏览器会把URL中#之前的部分发送给服务器请求资源，#后面的哈希片段只会在前端处理，不会触发服务器请求。对于单页应用(SPA)来说，所有路由都是前端管理的，没有对应服务器上的物理文件，哈希模式能确保服务器始终只处理根路径请求，不会因为前端路由而返回404。
• 支持刷新和直接访问子路由：当用户刷新页面或者直接输入带哈希的子路由URL时，服务器只会收到根路径请求，返回Angular的入口文件index.html，剩下的路由逻辑由Angular自己处理，不会出现页面找不到的情况。

2. 为何将其值设为true而非false？ #

设为true启用哈希模式，而设为false则是启用HTML5模式（PathLocationStrategy）。选择true通常基于以下场景：

• 后端未配置SPA fallback路由：如果后端没有做任何特殊配置，当用户访问非哈希模式的子路由（比如/about），服务器会去查找对应的物理文件或后端路由，找不到就返回404。哈希模式不需要后端修改，就能让路由正常工作。
• 部署环境受限：有些老旧服务器或静态托管平台不支持配置SPA fallback规则，这时候哈希模式是最省心的解决方案，不需要折腾后端就能上线。
• 兼容性需求：哈希模式对旧浏览器（比如IE10及以下）的兼容性更好，这些浏览器不支持HTML5 History API，而哈希模式不需要依赖这个API就能实现路由跳转。

3. 若将值设为false会产生什么后果？ #

当useHash: false时，Angular会使用更美观的HTML5模式路由（URL不带#），但会带来几个必须解决的问题：

• 刷新或直接访问子路由会404：如果后端没有配置将所有路由请求转发到index.html，用户刷新页面或者直接输入子路由URL时，服务器会返回404错误，因为服务器找不到对应的物理资源。
• 必须配合后端配置：你需要在后端设置fallback规则，比如：
  • Nginx：配置try_files $uri $uri/ /index.html;
  • Apache：配置RewriteRule ^[^.]*$ /index.html [L]
  • ASP.NET Core：配置app.MapFallbackToFile("index.html");
    只有这样，所有路由请求才会返回Angular的入口文件，确保路由正常工作。
• 旧浏览器兼容性问题：不支持HTML5 History API的浏览器（比如IE10及以下）无法正常使用路由，会出现跳转异常或页面加载失败的情况。

两种模式的URL示例对比 #

• 哈希模式（useHash: true）：http://yourdomain.com/#/about
• HTML5模式（useHash: false）：http://yourdomain.com/about

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