为什么要使用路由

现在的网络应用程序越来越多的使用AJAX异步请求完成页面的无缝刷新，导致浏览器的URL不会发生任何变化而完成了请求，从而破换了用户浏览体验。同时本次浏览的页面内容在用户下次使用URL访问时将无法重新呈现，使用路由可以很好地解决这个问题。

单页面应用利用了JavaScript动态变换网页内容，避免了页面重载；路由则提供了浏览器地址变化，网页内容也跟随变化，两者结合起来则为我们提供了体验良好的单页面web应用。

前端路由实现方式路由需要实现三个功能：

当浏览器地址变化时，切换页面； 点击浏览器【后退】、【前进】按钮，网页内容跟随变化； 刷新浏览器，网页加载当前路由对应内容；

在单页面web网页中, 单纯的浏览器地址改变, 网页不会重载，如单纯的hash网址改变网页不会变化，因此我们的路由主要是通过监听事件，并利用js实现动态改变网页内容，有两种实现方式： hash模式：监听浏览器地址hash值变化，执行相应的js切换网页； history模式：利用history API实现url地址改变，网页内容改变； 它们的区别最明显的就是hash会在浏览器地址后面增加#号，而history可以自定义地址。

hash模式

使用window.location.hash属性及窗口的onhashchange事件，可以实现监听浏览器地址hash值变化，执行相应的js切换网页。下面具体介绍几个使用过程中必须理解的要点：

hash指的是地址中#号以及后面的字符，也称为散列值。hash也称作锚点，本身是用来做页面跳转定位的。 散列值是不会随请求发送到服务器端的，所以改变hash，不会重新加载页面； 监听 window 的 hashchange 事件，当散列值改变时，可以通过 location.hash 来获取和设置hash值； location.hash值的变化会直接反应到浏览器地址栏； 触发hashchange事件的几种情况： 浏览器地址栏散列值的变化（包括浏览器的前进、后退）会触发window.location.hash值的变化，从而触发onhashchange事件；

history模式

概述 window.history 属性指向 History 对象，它表示当前窗口的浏览历史。当发生改变时，只会改变页面的路径，不会刷新页面。 History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。 由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。 浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。

属性

History 对象主要有两个属性。

History.length：当前窗口访问过的网址数量（包括当前网页）； History.state：History 堆栈最上层的状态值；

方法

History.back()、History.forward()、History.go() 这三个方法用于在历史之中移动。

History.back()：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。 History.forward()：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。 History.go()：接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为0，相当于刷新当前页面。

注意：移动到以前访问过的页面时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。

History.pushState() 该方法用于在历史中添加一条记录。pushState()方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有变化。

语法：history.pushState(object, title, url)

该方法接受三个参数，依次为：

object：是一个对象，通过 pushState 方法可以将该对象内容传递到新页面中。如果不需要这个对象，此处可以填 null。 title：指标题，几乎没有浏览器支持该参数，传一个空字符串比较安全。 url：新的网址，必须与当前页面处在同一个域。不指定的话则为当前的路径，如果设置了一个跨域网址，则会报错。