概述
1. hash
2. history
SPA需要在不刷新页面的情况下做页面更新,这就需要前端路由。实际上,前端路由是利用浏览器的hash和history属性
hash
hash(url中#后面的部分)虽然出现在URL中,但不会被包含在http请求中,对后端完全没有影响,因此改变hash不会重新加载页面。
当hash改变时,会触发hashchange事件,监听该事件,对页面进行更新。
window.onhashchange = function(){
......
}
history
history利用了html5 history interface 中新增的pushState()和replaceState()方法。这两个方法应用于浏览器记录栈。
在当前已有的back、forward、go基础上,他们提供了对历史记录修改的功能;pushState传入url直接压入历史记录栈,replaceState将传入url替换当前历史记录栈。
当它们执行修改时,虽然改变了当前URL,但浏览器不会立即向后端发送请求。
pushState()、replaceState()方法接受三个参数:stateObj、title、url
history.pushState({color:"red"},"red",red);
window.onpopState = function(event){
if(event.state && event.state.color === "red") {
document.body.style.color = "red"; //更新页面内容
}
}
history & hash
history优点:
history缺点:
history在刷新页面时,如果服务器中没有相应的响应或资源,就会返回404。因此,如果URL匹配不到任何静态资源,则应该返回同一个index.html页面。
参考: