前端路由的理解

前端路由实现方式分为history +pushState popState 与hash +hashchange

 

hash +hashchange: 原理：

使用www.hao123.com/#XXX #xxx是不会发给服务器的，浏览器会认为是相同的路径，所以不会对后端发起请求，

而通过按钮可以改变#后面的路径，这里可以通过hashChange 来获取URl的改变在跳转对应的路径刷新页面。

 

history 是H5提供的关于前进后退的解决方案 。history +pushState popState 原理：

由于hash 有带#号，导致前端的URL显示不够优雅。所以可以使用这种方式。

 

history.length：当前历史列表中的历史记录数
history.go(n)：前进或后退n条记录，当n=0或空时会刷新当前页； 
history.back()：后退一步；
history.forward()：前进一步; 

 

history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录； data会在onpopstate事件触发时作为参数传递过去；title为页面标题，当前所有浏览器都会 忽略此参数；url为页面地址，可选，缺省为当前页地址；
history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上； 
history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样；
window.onpopstate：响应pushState或replaceState的调用；

 

需要了解传参