SPA路由实现

需求：切换页面，异步加载JS，异步传参。

方式1：修改URL中的Hash

URL可带Hash标识不同页面，通过Window对象的onhashchange事件修改URL中的hash值。

http://www.hostname.com/index#page-home
http://www.hostname.com/index#page-profile
http://www.hostname.com/index#page-setting
http://www.hostname.com/index#page-news

window对象的onhashchange事件触发场景

• 直接更改浏览器地址，在其后新增或修改#hash
• 通过改变location.href或location.hash的值
• 出发点击带hash锚点的链接
• 浏览器前进后退导致hash变化，前提是网址中hash值不同。

方式2：修改H5的History

H5的history作为一种主流方法，因为hishtory是浏览器历史栈的一个接口，history对象中有back()、forward()、go()实现堆栈跳转。

H5提出pushState()和replaceState()方法，可向历史栈中添加数据，好像URL变化一样。在过去，只有URL变化history栈才会变化。使用H5的history可以很好的模拟浏览器前进后退。前端路由也是基于这个原理实现的。

pushState(obj, title, url)

• 向history栈写入数据
• obj 写入的数据对象，不大于640KB
• title 页面标题
• url 相对路径

使用注意

• 当pushState执行一个浏览器的URL会发生改变页面不会刷新，只有当触发了前进后退等事件浏览器才会刷新。
• URL受到同源策略限制，防止恶意脚本模仿站点URL来欺骗用户。所以当违背同源策略时会报错。
• Firefox目前会忽略title参数化

replaceState(obj, title, url)

区别在于replaceState不是写入而是替换栈顶记录，其余和pushState一样。

History.length

静态只读属性，历史堆栈长度。

方式3：director.js 路由插件