面试被问及 hash 与 history 的区别该怎么回答？

为什么推荐使用 hash 模式？

创建项目时，vue-router 默认使用 hash 模式，设置模式的时候到底该使用hash还是history模式呢？

先了解它们的实现原理，搞清楚之间的区别，就知道什么时候该选择什么模式了。

 

一、实现原理

 hash 原理

hash 是通过监听浏览器 onhashchange 事件变化，查找对应路由应用。通过改变 location.hash 改变页面路由。

 

history 原理

利用 html5 的history Interface 中新增的 pushState() 和 replaceState() 方法，改变页面路径。

history Interface 是浏览器历史记录栈提供的接口，可通过 back、forward、go 等，可以读取历览器历史记录栈的信息，pushState、repalceState 还可以对浏览器历史记录栈进行修改。

 

hash 与 history 区别对比：

hash	history
有 # 号	没有 # 号
能够兼容到IE8	只能兼容到IE10
实际的url之前使用哈希字符，这部分url不会发送到服务器，不需要在服务器层面上进行任何处理	没访问一个页面都需要服务器进行路由匹配生成 html 文件再发送响应给浏览器，消耗服务器大量资源
刷新不会存在 404 问题	浏览器直接访问嵌套路由时，会报 404 问题。
不需要服务器任何配置	需要在服务器配置一个回调路由

 

二、为什么推荐使用 hash 模式？

 理由：

1、从兼容角度分析。

　　hash 可以兼容到 IE8，而 history 只能兼容到 IE10。

2、从网络请求角度分析。

　　使用 hash 模式，地址改变时通过 hashchange 事件，只会读取哈希符号后的内容，并不会发起任何网络请求。

　　而 history 模式，每访问一个页面都要发起网络请求，每个请求都需要服务器进行路由匹配、数据库查询、生成HTML文档后再发送响应给浏览器，这个过程会消耗服务器的大量资源，给服务器的压力较大。

3、服务器配置角度分析。

　　hash 不需要服务器任何配置。

　　history 进行刷新页面时，无法找到url对应的页面，会出现 404 问题。因为域名后面的路由是由前端控制的，后端只能保留域名部分，所以就会造成页面丢失的问题，需要服务器端添加一个回退路由，就能解决该问题了。

 

hash 模式不足

1、hash 模式中的 # 也称作锚点，这里的的 # 和 css 中的 # 是一个意思，所以在 hash 模式内，页面定位会失效。

2、hash 不利于 SEO（搜索引擎优化）。

3、白屏时间问题。浏览器需要等待 JavaScript 文件加载完成之后渲染 HTML 文档内容，用户等待时间稍长。