标签：vue hash color 浏览器 event red history

hash

hash模式原理是onhashchange事件，可以在window对象上监听这个事件：

window.onhashchange = function(event){
	console.log(event)
	let hash = location.hash.slice(1);
	document.body.style.color = hash;
}

hash发生变化的url都会被浏览器记录下来，浏览器的前进后退都可以用。
网易云音乐，百度网盘都采用了hash路由

history

利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化
hash路由支持低版本的浏览器(能兼容到IE8)，而history(兼容到IE10)路由是HTML5新增的API
history api可以分为两部分。切换和修改
切换历史状态
包括back,forward,go三个方法，对应浏览器的前进，后退，跳转。

history.go(-2);   //后退两次

history.go(2);   //前进两次

history.back();   //后退

history.forward();   //前进

修改历史状态 pushState() 和 replaceState()

history.pushState({color:"#999999"},'red','red')
window.onpopstate = function(event){
	console.log(event)
	if(event.state&& event.state.color === 'red'){
		document.body.style.color = 'red';
	}
}

history弊端：
如果点击刷新，就会重新向后端服务器发送请求，如果服务器中没有相应的响应资源，会到时出现404页面
如果想在github.io上搭建一个诶单页面博客，应该选择hash模式

标签：vue,hash,color,浏览器,event,red,history
来源： https://blog.csdn.net/qq_45432996/article/details/116482117

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。