前端路由hash和history的六大区别

前言

本文主要讲解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缺点

1. 不利于SEO（搜索引擎优化）
2. 由于浏览器需要先加载js再渲染页面，可能导致浏览器加载时间过慢导致白屏问题。