实现原理
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 模式？
- 创建项目时，vue-router 默认使用 hash 模式
从兼容角度分析
- hash 可以兼容到 IE8，而 history 只能兼容到 IE10
从网络请求的角度分析
-
hash 模式地址改变时通过 hashchange 事件，只会读取哈希符号后的内容，并不会发起任何网络请求
-
history 模式，每访问一个页面都要发起网络请求
-
每个请求都需要服务器进行路由匹配、数据库查询、生成HTML文档后再发送响应给浏览器
-
消耗服务器的大量资源，给服务器的压力较大
-
服务器配置角度分析
-
hash：不需要服务器任何配置
-
history：进行刷新页面时，无法找到url对应的页面，会出现 404 问题
- 因为域名后面的路由是由前端控制的，后端只能保留域名部分，所以就会造成页面丢失的问题，需要服务器端添加一个回退路由，就能解决该问题了。
hash 模式不足
-
页面定位会失效
- hash 模式中的 # 也称作锚点，和 css 中的 # 一样
-
不利于 SEO（搜索引擎优化）
-
白屏时间问题长
- 浏览器需要等待 JavaScript 文件加载完成之后渲染 HTML 文档内容
