前端路由的理解
前端路由实现方式分为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.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的调用;
需要了解传参