随着 ajax 的使用越来越广泛，前端的页面逻辑开始变得越来越复杂，特别是spa的兴起，前端路由系统随之开始流行。

1.从用户的角度看，前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）：

2.记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存（分享）时的状态）；可以使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到使用ajax更新页面之前的状态，url也回到之前的状态）；

作为开发者，要实现这两个功能，我们需要做到：

1.改变url且不让浏览器向服务器发出请求；

2.监测 url 的变化；

3.截获 url 地址，并解析出需要的信息来匹配路由规则。

我们路由常用hash模式和history模式实际上就是实现了上面的功能。

hash模式

hash是指url后的#以及后面的字符。这里的#和css中的#是一个意思。hash也称作 锚点  本身是用作做页面定位的，它可以让对应id的元素显示在可视区域内。

window.location.hash = 'qq' // 设置 url 的 hash，会在当前url后加上 '#qq'

            var hash = window.location.hash // '#qq' 

            window.addEventListener('hashchange', function(){ 

    // 监听hash变化，点击浏览器的前进后退会触发

    })

history模式

已经有 hash 模式了，而且 hash 能兼容到IE8， history 只能兼容到 IE10，为什么还要搞个 history 呢？

首先，hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。

window.history.pushState(state, title, url) 

// state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取

// title：标题，基本没用，一般传 null

// url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。

//如 在百度页面控制台输出：

window.history.pushState(null, null, "https://www.baidu.com/?name=history");

地址栏会变为：https://www.baidu.com/?name=history

执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/qq/

上面的例子中 改变url页面并没有刷新，同样根据API所述，浏览器会产生浏览记录。