SPA 项目路由中，hash 与 history 的微妙之别

在单页应用 (SPA) 项目中，路由是一个非常重要的概念。它允许我们通过改变 URL 来动态加载不同的组件或页面，而无需重新加载整个页面。在 SPA 项目中，通常有两种路由模式：hash 模式和 history 模式。

1. hash 模式

hash 模式是通过改变锚点 (#) 来更新页面 URL，并不会触发页面重新加载。我们可以通过 window.onhashchange 监听到 hash 的改变，从而处理路由。

hash 模式的优点：

• 实现简单，兼容性好，支持所有浏览器。
• 不需要服务器端支持，可以轻松部署到任何服务器上。
• 不需要后端配置，更方便开发人员进行调试。

hash 模式的缺点：

• URL 中包含 #，不美观，也不符合 RESTful 风格。
• 无法通过后退按钮或直接输入 URL 来导航，这可能会导致用户感到困惑。
• 无法使用浏览器的前进和后退按钮在页面之间导航。
• 由于hash值的变化只能通过脚本触发，因此搜索引擎无法爬取SPA应用程序中的页面，不利于SEO。

2. history 模式

history 模式是通过调用 window.history 对象上的 pushState() 和 replaceState() 方法来更新页面 URL，并不会触发页面重新加载。我们可以通过 popstate 事件来监听 URL 的改变，从而处理路由。

history 模式的优点：

• URL 美观，符合 RESTful 风格。
• 可以通过后退按钮或直接输入 URL 来导航，这更符合用户的习惯。
• 可以使用浏览器的前进和后退按钮在页面之间导航。
• 有利于搜索引擎爬取，对SEO友好。

history 模式的缺点：

• 需要服务器端支持，需要服务器端进行额外的配置。
• 需要后端配置，如服务器端重定向和404页面处理等。
• 实现比 hash 模式复杂，需要考虑兼容性问题。

3. hash 模式与 history 模式的区别

特性	hash 模式	history 模式
URL 中是否包含 #	是	否
是否需要服务器端支持	否	是
是否需要后端配置	不需要	需要
实现难度	简单	复杂
兼容性	好	差
SEO 友好	差	好

4. 如何选择合适的路由模式

在选择路由模式时，需要考虑以下几点：

• 项目的具体需求。
• 服务器端是否支持 history 模式。
• 项目的兼容性要求。
• SEO 的要求。

一般来说，如果项目需要考虑 SEO，那么 history 模式是更好的选择。但是，如果项目需要兼容性好，那么 hash 模式是更好的选择。

5. 结论

hash 模式和 history 模式各有优缺点，在选择时需要根据项目的具体需求来决定。