路由

url#(hash值)

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。使用超链接可以改变hash值：

<a href="#1">锚点链接</a>

#的意义
#代表网页中的位置。其右面的字符，就是该位置的标识符。例如：

http://www.example.com/index.html#print

就代表网页index.html的print位置。
为网页位置指定标识符，可以设置a标签name或id属性。

<a name="1">对应锚点1</a>
<a id="2">对应锚点2</a>

#与HTTP
#是用来指导浏览器动作的，对服务器端完全无用。在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。
这意味着：
1.这些字符都不会被发送到服务器端。单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。
2.改变#只会改变浏览器的访问历史。
3.window.location.hash可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。

hashchange事件
当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号)。

window.addEventListener("hashchange", func, false);

前端路由

前端路由，就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果。

1.HTML5 HistoryAPI
HTML5的History API为浏览器的全局history对象增加的扩展方法。

h4的api包括：

history.forward()  //在历史记录中前进一步
history.back()  //在历史记录中后退一步
history.go(n)  //在历史记录中跳转n步骤，0为刷新本页,-1为后退一页，1为前进一页。
history.length  //返回历史堆栈中页面的数量

h5提供了对history栈中内容的操作：

history.pushState(data,[title],[url])  //向历史记录中追加一条记录
history.replaceState(data,[title],[url])  //替换当前页在历史记录中的信息。
history.state  //得到当前页的state信息。
window.onpopstate  //在点击浏览器后退按钮或js调用forward()、back()、go()时触发。event.state包含通过pushState()或replaceState()方法传入的data参数。

当调用history.pushState()方法向历史栈(当前地址的状态信息储存处)中压入一个新的state后，history.state 中包含了 data 的一份拷贝。历史栈的指针是指向新的state的。也就是模仿url地址改变并进行了跳转，在历史记录中保存记录。不是真的改变url，这样是不触发window.onpopstate。

2.HashChange
HTML页面中通过锚点定位原理可进行无刷新跳转，触发后url地址中会多出# + 'XXX'的部分，同时在全局的window对象上触发hashChange事件，这样在页面锚点哈希改变为某个预设值的时候，通过代码触发对应的页面DOM改变，就可以实现基本的路由了