前端框架路由实现的Hash和History两种模式的区别

前言

• 以前面试的时候就有准备过前端框架中两种路由实现方式及区别，可是当时没专门下功夫去深刻了解，就在网上搜了下别人总结的临时抱了下佛脚。可是事实证实，出来混，老是要还的，在后来的面试中又遇到了，并且此次问得更加深刻，仅仅靠死记硬背来的知识老是遗忘得很快，网上别人总结的东西终归仍是别人的，鉴于网上别人总结的内容有点杂乱无章，仍是决定本身在此总结记录一番，以加深印象。

1、何为前端路由

• 路由的概念来自于服务器端，在SPA（单页应用）中，路由描述的是URL到函数的映射关系，即在浏览器中输入一个URL，相应的控制器会对提交的请求进行解析，而后进行路由匹配，找到对应的模块和函数进行执行。

2、如何实现

• 实现的两个核心问题是如何检测路由变化和如何改变URL而不刷新页面，一般有两种实现模式，一种是Hash模式，一种是History模式。

3、Hash模式

• 早期的前端路由的实现就是基于location.hash来实现的，location.hash的值就是URL中#后面的内容 其实现原理就是监听#后面的内容来发起Ajax请求来进行局部更新，而不须要刷新整个页面。
• 使用hashchange事件来监听 URL 的变化，如下这几种状况改变 URL 都会触发 hashchange 事件：浏览器前进后退改变 URL、<a>标签改变 URL、window.location改变URL。

优缺点

• 兼容低版本浏览器，Angular1.x和Vue默认使用的就是hash路由
• 只有#符号以前的内容才会包含在请求中被发送到后端，也就是说就算后端没有对路由全覆盖，可是不会返回404错误
• hash值的改变，都会在浏览器的访问历史中增长一个记录，因此能够经过浏览器的回退、前进按钮控制hash的切换
• 会覆盖锚点定位元素的功能
• 不太美观，#后面传输的数据复杂的话会出现问题

4、History模式

• history 提供了 pushState 和 replaceState 两个方法来记录路由状态，这两个方法改变 URL 不会引发页面刷新
• history 提供相似 hashchange 事件的 popstate 事件，但 popstate 事件有些不一样：经过浏览器前进后退改变 URL 时会触发 popstate 事件，经过pushState/replaceState或<a>标签改变 URL 不会触发 popstate 事件。好在咱们能够拦截 pushState/replaceState的调用和<a>标签的点击事件来检测 URL 变化，因此监听 URL 变化能够实现，只是没有 hashchange 那么方便。
• pushState(state, title, url) 和 replaceState(state, title, url)均可以接受三个相同的参数：
• state：须要保存的数据，这个数据在触发popstate事件时，能够在event.state里获取
• title：标题，基本没用，通常传 null
• url：设定新的历史记录的 url，新的 url 与当前 url 的 origin 必须是同样的，不然会抛错，url能够是绝对路径，也能够是相对路径。

优缺点

• 使用简单，比较美观
• pushState()设置新的URL能够是任意与当前URL同源的URL，而hash只能改变#后面的内容，所以只能设置与当前URL同文档的URL
• pushState()设置的URL与当前URL如出一辙时也会被添加到历史记录栈中，而hash#后面的内容必须被修改才会被添加到新的记录栈中
• pushState()能够经过stateObject参数添加任意类型的数据到记录中，而hash只能添加短字符串
• pushState()可额外设置title属性供后续使用
• 前端的URL必须和向发送请求后端URL保持一致，不然会报404错误
• 因为History API的缘故，低版本浏览器有兼容行问题

参考

• www.jianshu.com/p/d2aa8fb95…
• blog.csdn.net/Benjamin920…
• www.cnblogs.com/lguow/p/109…
• www.cnblogs.com/funny-code1…