为什么 SPA 应用会提供一个 hash 路由，好处是什么

一、什么是 SPA 和 Hash 路由

1. SPA（单页应用）简介

SPA 是一种网页应用程序，整个应用只有一个 HTML 页面，通过 JavaScript 动态更新页面内容来模拟多页面的应用体验。用户在使用过程中，页面不会进行整页刷新，而是局部更新，从而提供流畅的用户体验。

2. Hash 路由原理

Hash 路由是利用 URL 中的哈希部分（即`#`后面的内容）来实现路由功能。例如，`http://example.com/#/home`中的`#/home`就是哈希部分。当哈希值发生变化时，浏览器不会向服务器发送请求（因为哈希部分被视为页面内的定位符），而是可以在 JavaScript 中捕获这个变化，然后根据不同的哈希值加载不同的内容，实现前端路由。

二、Hash 路由在 SPA 中的好处

1. 浏览器兼容性好

传统的 HTML5 历史记录 API（用于实现无哈希的前端路由）在一些旧浏览器（如 IE9 及以下）中可能存在兼容性问题。而 Hash 路由利用的是浏览器对 URL 哈希部分的原生支持，这种支持在几乎所有浏览器中都存在，包括较旧的浏览器版本。这使得 SPA 应用可以在更广泛的浏览器环境中正常运行，减少了因浏览器兼容性导致的问题。

2. 不会向服务器发送请求

由于浏览器将哈希部分视为页面内的定位符，当哈希值改变时，浏览器不会重新向服务器请求新的页面。这对于 SPA 应用非常重要，因为整个应用的内容是通过 JavaScript 在前端动态加载和更新的。如果每次路由变化都向服务器请求新页面，就失去了 SPA 应用的优势，并且会增加服务器的负担和页面的加载时间。例如，在一个包含多个视图（如首页、产品页、用户中心页）的 SPA 电商应用中，用户在不同视图之间切换时，只需要前端根据哈希值更新相应的组件，而无需服务器重新发送整个页面的 HTML 代码。

3. 易于实现和理解

相对来说，Hash 路由的实现机制比较简单。开发人员可以通过监听`hashchange`事件来捕获哈希值的变化，然后根据不同的哈希值进行相应的操作，如加载不同的组件、更新页面状态等。例如，在 JavaScript 中可以这样监听`hashchange`事件：

window.addEventListener("hashchange", function () {

  let hash = window.location.hash;

  if (hash === "#/home") {

    // 加载首页组件

    loadHomeComponent();

  } else if (hash === "#/product") {

    // 加载产品页组件

    loadProductComponent();

  }

});

这种简单的实现方式使得开发人员可以快速上手，并且在小型 SPA 项目或者初学者学习前端路由时，是一种很好的选择。

4. 方便进行页面状态的分享和恢复

Hash 路由的 URL 可以方便地被复制和分享。当用户将包含哈希值的 URL 分享给其他人时，其他人打开链接后，前端应用可以根据 URL 中的哈希值直接加载对应的页面内容，恢复到相同的页面状态。例如，在一个 SPA 新闻应用中，用户正在阅读某一篇新闻文章，此时 URL 中的哈希值对应这篇新闻文章的视图。当用户把这个 URL 发送给朋友后，朋友打开链接时，应用就可以根据哈希值加载相同的新闻文章视图，方便信息的传播和共享。