ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue路由两种模式区别hash和history

2021-05-07 10:58:33  阅读:25  来源: 互联网

标签: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

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有