hash 路由和 history 路由的区别

我有一棵树

已于 2024-02-20 17:49:47 修改

阅读量466

点赞数 6

文章标签：哈希算法算法

于 2024-01-16 13:00:29 首次发布

本文链接：https://blog.csdn.net/qq_17335549/article/details/135622010

版权

history api 和hash 路由都是前端路由的一种实现方式，关于前端路由和服务端路由的区别，请参考这篇文章。

他俩作为前端路由有一个共同点：可以动态改变URL，都不会导致页面的重新加载，都不会给服务端发起请求

Hash 路由（Hash Routing）：
1. 哈希路由是通过在 URL 中使用哈希符号 # 来实现的，
2. 缺点： URL中的哈希部分虽然不会触发页面刷新，但在一些SEO优化和服务器渲染等方面可能存在一些限制。
3. 优点： 兼容性较好，因为哈希部分的变化不会导致浏览器向服务器发送新的请求，可以在不刷新页面的情况下改变路由。
4. 刷新页面的时候或者在地址栏回车请求该地址的时候，哈希值不会出现在 http 请求的url中，所以不会出现404 的情况
5. 种方式在早期的前端框架和单页应用中比较常见，因为它可以兼容不支持 History API 的旧版本浏览器。
6. 哈希值变化会加到浏览器的历史记录中，可以通过前进后退按钮跳转
7. 实现方式： 前端路由器通过监听 window.onhashchange 来判断路由的改变。
8. URL 结构： 使用URL中的哈希部分（#）来表示不同的路由。例如，http://example.com/#/page1。
History 路由（History API Routing）：
- History API 是 HTML5 提供的一组API，允许修改浏览器历史记录而不引起页面刷新
- URL 结构： 使用标准的URL路径表示不同的路由。例如，http://example.com/page1。新页面整个路径都会出现在 http 的请求中
- 实现方式： 前端路由器使用HTML5的History API，主要包括 pushState 和replaceState方法，这些方法允许修改浏览器历史记录而不引起页面刷新。
- 路由变化，会出现404的情况
  - 因为 404 的意思是资源未找到
  - 路由变化会尝试获取改路径对应的资源，没有相应的路由处理程序处理该路径，就会返回 404
- 优点： URL更加清晰，更符合传统的URL结构，有助于SEO和服务器渲染。不使用哈希部分，可以更自由地设计URL。
- 缺点： 兼容性相对较差，因为一些老旧的浏览器不支持HTML5的History API。需要服务器配置以支持前端路由。