vue-router有两种模式，hash和history模式。
hash模式，默认是hash模式
hash的原理是onhashchange事件 使用URL的hash来模拟一个完整的URL，当URL改变的时候，页面不会加载，也就是单页面应用，当#后面的hash发生变化，不会导致浏览器向服务器发出请求，浏览器不发出请求就会刷新页面，并且会触发hashchange这个事件，通过监听hash值的变化来实现更新页面部分内容的操作
对于hash模式会创建hashHistory对象，在访问不同的路由的时候会发生两件事件 使用push将新路添加到路径后面后者使用replace()替换到当前的路由
image.png
https://img-blog.csdnimg.cn/20190522174716820.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDc3NTYx,size_16,color_FFFFFF,t_70
history路由:
主要使用HTML5的pushState()和replaceState()这两个api来实现的, api分为两大部分 切换和修改，
切换历史状态：
history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
修改历史状态：
包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url
history.pushState({color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
console.log(event.state)
if(event.state && event.state.color === 'red'){
document.body.style.color = 'red';
}
}
history.back();
history.forward();
通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。
history模式怕啥
通过history api，我们丢掉了丑陋的#，但是它也有个毛病：
不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的,不玩虚的。
在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。
所以，如果你想在github上搭一个单页博客，就应该选择hash模式。
网友评论