vue路由器中哈希和历史模式的区别

众所周知，vue-router有两种模式，哈希模式和历史模式。这就是它们之间的区别。

哈希模式

哈希模式背后的原理是onhashchange事件，可以在window对象：上监视该事件

window . onhashchange=function(event){ console . log(event . old URL，event . new URL)；让hash=location . hash . slice(1)；document . body . style . color=hash；}上面的代码可以通过改变哈希来改变页面的字体颜色。虽然没用，但在一定程度上说明了原理。

更重要的是，因为哈希发生变化的URL会被浏览器记录下来，你会发现浏览器可以用来前后移动，当你点击后退时，页面的字体颜色也会发生变化。这样，虽然浏览器没有请求服务器，但是页面状态和url是一一关联的。后来人们给它起了一个霸气的名字叫前端路由，成为了单页应用的标准。

网易云音乐，百度网盘采用哈希路由，看样子这个：http://music.163.com/#/friend

https://pan.baidu.com/disk/home#list/vmode=list

历史路由

随着历史api的到来，前端路由开始演进。在前面的hashchange中，您只能在#之后更改url片段，而history api给了前端完全的自由

历史api可以分为切换和修改两部分，参考MDN

切换历史状态

包括后退、前进、go方法，对应浏览器的前进、后退、跳转操作，有同学说(谷歌)浏览器只有前进和后退，没有跳转。嗯，如果你长时间按下鼠标前进和后退，当前窗口的所有历史记录都会出来，这样你就可以跳转了(也许叫跳转更合适):

history . go(-2)；//回去两次(2)；//往前走两次history . back()；//back history . forward()；//前进修改历史状态

包括两个方法pushState和replaceState，它们接收三个参数：stateObj、title、url和URL

history . PushState({ color : ' red ' }，' red '，' red ' })window . onOpstate=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对象，这样就可以恢复页面状态。这里，页面状态是页面字体颜色。事实上，滚动条的位置、阅读进度和组件切换的页面状态都可以存储在状态中。

历史模式怕什么

通过历史api，我们失去了丑#，但它也有一个问题：

不怕往前走，不怕往后走，就是怕刷新，f5，(如果后端没有准备)，因为刷新其实是请求服务器，不是玩。

在哈希模式下，前端路由会修改#中的信息，但是浏览器在请求时并不会播放，所以没有问题。但是，在历史中，您可以自由修改路径。刷新时，如果服务器中没有相应的响应或资源，每分钟就会刷出一个404。

因此，如果你想在github.io上建立一个一页的博客，应该选择hash模式。

摘要

以上就是边肖介绍的vue路由器中哈希和历史的区别。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！