前端路由hash和history的六大区别
前端路由hash和history的区别
- 前言
- 谁的URL有#
- 回车刷新时hash和history变化
- 谁支持低版本浏览器
- hash不会重新加载页面
- 谁有历史记录
- 谁需要后台配置
- hash缺点
前言
本文主要讲解hash和history路由的区别，那么好本文正式开始。
谁的URL有#
路由Hash的地址上有#,而history路由没有#，这也是它俩最直观的区别。
回车刷新时hash和history变化
当我们在url中用回车键进行刷新时，hash会加载对应的页面，而history就会报404的错误。报错404的原因是在history模式中，地址并不是真实存在的，所以会报错404.
谁支持低版本浏览器
Hash路由是支持低版本浏览器的，而history不支持低版本的浏览器。具体点说就是hash能兼容到IE8，而history只能兼容到IE10版本。因为history是HTML5新增的。
hash不会重新加载页面
hash (url中#后面的部分)出现在url中，但不会被包含在http请求中，对后端完全没有影响，因此改变hash不会重新加载页面。而history当改变时候会重新加载页面。
谁有历史记录
history有历史记录，并且可以修改历史记录，因为它在H5中新增了pushstate和replacestate两个方法用于修改历史记录。
谁需要后台配置
history因为不会立刻请求http，所以说它其实是需要后台对它的刷新进行一个配置。而hash不需要。
注：而 Vue / React 应用的是hash的原理。通过不同的路由去调用不同的 函数 / js去生成不同的页面代码。
hash缺点
- 不利于SEO（搜索引擎优化）
- 由于浏览器需要先加载js再渲染页面，可能导致浏览器加载时间过慢导致白屏问题。