前端路由：hash和history

hash -window.onhashchange
H5 history - history.pushState和window.onpopstate
H5 history需要后端支持

两者选择

to B的系统推荐用hash，简单易用，对url不敏感
to C的系统，key考虑选择H5 history，但需要服务端支持

路由

路由是根据不同的url地址来显示不同的页面或内容

为何需要前端路由

因为后端路由有一个很大的缺点，就是每次路由切换的时候都需要去刷新页面，然后发ajax请求，返回数据，对用户体验不好。前端路由，浏览器不会重新刷新

DOM window对象通过history对象提供了对当前会话浏览历史的访问

html4下：window.history.legth;window.history.go();window.history.back();window.history.forward();
html5中：新增window.history.state;
window.history.pushState(data, title, ?url): 在会话浏览历史记录中添加一条记录;
window.history.replaceState(data, title, ?url)修改会话浏览历史的当前记录，而不是新增一条记录;

前端路由也有2种模式

1. hash模式

带#号，后面就是hash值;改变后面的hash值，它不会向服务器发出请求，因此也就不会刷新页面。并且每次hash值发生改变的时候，会触发hashchange事件。因此我们可以通过监听该事件，来知道hash值发生了哪些变化

2. history模式

在window对象中提供了onpopstate事件来监听历史栈的改变，只要历史栈有信息发生改变的话，就会触发该事件。
history.pushState 和 history.replaceState

hash 和 pushState 对比

1. hash只能修改url的片段标识符的部分。并且必须从#号开始，但是pushState且能修改路径、查询参数和片段标识符。pushState比hash更符合前端路由的访问方式，更加优雅(因为不带#号)。

2. hash必须和原先的值不同，才能新增会话浏览历史的记录，但是pushState可以新增相同的url的记录