vue路由模式有两种
分别是哈希模式和history模式
哈希:不包含http请求头,不重载页面
History:前后端url地址不一样报错,需要配合后端
原理:利⽤html5新增的两个特性⽅法,分别是psuhState和replaceState来完成的.
通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面
<script type="text/javascript">
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
let hash = location.hash.slice(1);
document.body.style.color = hash;
}
window.history.pushState({color:'red'}, 'red', '');
window.onpopstate = function(event){
console.log(event.state);
if(event.state && event.state.color === 'red'){
document.body.style.color = 'red';
}
}
</script>