一文了解vue-router之hash模式和history模式
当前版本:3.0.3
类目录:src/history/base.js
hash模式
即地址栏URL中的#符号（此hash不是密码学里的散列运算）。比如这个URL：http://www.abc.com/#/hello，hash的值为#/hello。它的特点在于：hash虽然出现在URL中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
history模式
利用了HTML5HistoryInterface中新增的pushState()和replaceState()方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会立即向后端发送请求。
HTML5History实现
使用window.addEventListener('popstate')监听浏览器滚动行为，然后判断配置是否有scrollBehavior，有就调用handleScroll方法来处理
滚动行为:使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
handleScroll
router.app.$nextTick(()=>{
constposition=getScrollPosition()
constshouldScroll=behavior.call(router,to,from,isPop?position:null)
if(!shouldScroll){
return
}
if(typeofshouldScroll.then==='function'){
shouldScroll.then(shouldScroll=>{
scrollToPosition((shouldScroll:any),position)
}).catch(err=>{
if(process.env.NODE_ENV!=='production'){
assert(false,err.toString())
}
})
}else{
scrollToPosition(shouldScroll,position)
}
})
scrollToPosition
functionscrollToPosition(shouldScroll,position){
constisObject=typeofshouldScroll==='object'
if(isObject&&typeofshouldScroll.selector==='string'){
constel=document.querySelector(shouldScroll.selector)
if(el){
letoffset=shouldScroll.offset&&typeofshouldScroll.offset==='object'?shouldScroll.offset:{}
offset=normalizeOffset(offset)
position=getElementPosition(el,offset)
}elseif(isValidPosition(shouldScroll)){
position=normalizePosition(shouldScroll)
}
}elseif(isObject&&isValidPosition(shouldScroll)){
position=normalizePosition(shouldScroll)
}
使用window.scrollTo来进行滚动处理
if(position){
window.scrollTo(position.x,position.y)
}
}
push
push操作也是HTML5History模式下的一个比较关键的方法，他使用pushState来进行跳转操作，然后handleScroll来进行滚动\
exportfunctionpushState(url?:string,replace?:boolean){
saveScrollPosition()
//try...catchthepushStatecalltogetaroundSafari
//DOMException18whereitlimitsto100pushStatecalls
consthistory=window.history
try{
if(replace){
history.replaceState({key:_key},'',url)
}else{
_key=genKey()
history.pushState({key:_key},'',url)
}
}catch(e){
window.location[replace?'replace':'assign'](url)
}
}
HashHistory实现
对于HashHistory的实现，和HTML5History的区别是在于Listener的方式和跳转的方式
Listener的方式这里是使用了hashchange，但是如果需要滚动行为就会去监听popstate
window.addEventListener(supportsPushState?'popstate':'hashchange')
跳转的方式会判断是否需要滚动，不需要就直接使用window.location.hash
functionpushHash(path){
if(supportsPushState){
pushState(getUrl(path))
}else{
window.location.hash=path
}
}
总结
以上所述是小编给大家介绍的vue-router之hash模式和history模式,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！