用你的方式探索前端路由模式：hash 与 history

前端路由是一种在单页面应用程序 (SPA) 中实现页面导航而不重新加载整个页面的技术。它允许用户在页面之间无缝切换，同时保持相同的 URL。目前，前端路由主要有两种模式：hash 模式和 history 模式。

Hash 模式

Hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。这种模式简单易用，不需要服务器端支持，因此受到广泛的欢迎。

Hash 模式的优点：

• 简单易用： Hash 模式不需要服务器端支持，实现起来非常简单。
• 兼容性好： Hash 模式兼容性好，支持所有现代浏览器。
• 支持后退按钮： Hash 模式支持浏览器的后退按钮，用户可以轻松地返回上一个页面。

Hash 模式的缺点：

• 不美观： Hash 模式会在 URL 中添加井号 #，这会影响 URL 的美观性。
• 不适合 SEO： Hash 模式不适合 SEO，因为井号 # 后面的内容不会被搜索引擎抓取。

History 模式

History 模式是一种利用浏览器历史记录来实现前端路由的模式。当路径发生变化时，浏览器会创建一个新的历史记录条目，同时也会向服务器端发送一个请求。这种模式需要服务器端支持，但它可以提供更美观的 URL 和更好的 SEO 效果。

History 模式的优点：

• 美观： History 模式不会在 URL 中添加井号 #，URL 更加美观。
• 适合 SEO： History 模式适合 SEO，因为路径会包含在 URL 中，便于搜索引擎抓取。
• 支持后退按钮： History 模式支持浏览器的后退按钮，用户可以轻松地返回上一个页面。

History 模式的缺点：

• 需要服务器端支持： History 模式需要服务器端支持，实现起来比 Hash 模式复杂。
• 兼容性较差： History 模式兼容性较差，不支持一些老旧的浏览器。
• 不支持后退按钮： History 模式不支持浏览器的后退按钮，用户无法直接返回上一个页面。

如何选择合适的路由模式？

Hash 模式和 History 模式各有优缺点，在选择合适的路由模式时，需要考虑以下因素：

• 服务器端支持： 如果你的项目没有服务器端支持，那么只能使用 Hash 模式。
• SEO： 如果你的项目需要 SEO，那么应该使用 History 模式。
• URL 美观： 如果你希望 URL 更加美观，那么应该使用 History 模式。
• 兼容性： 如果你需要兼容老旧的浏览器，那么应该使用 Hash 模式。

总之，Hash 模式和 History 模式都是前端路由常用的模式，各有优缺点。在选择合适的路由模式时，需要考虑项目的需求和具体情况。