vuerouter的hash与history 区别,vue路由history模式和hash
为了构建SPA(单页应用)，有必要引入前端路由系统，这就是Vue-Router存在的意义。本文主要介绍vue-router中两种模式的区别，即哈希模式和历史模式的相关信息。有需要的可以参考一下。
vue路由器有两种模式。
哈希模式
历史模式
1.单页面应用
单页应用程序
1.html文件只有一个，整个网站的所有内容都在这个html里，由js处理。
2.不仅页面交互没有刷新，连页面跳转都有。为了实现单页面应用==前端路由与前端分离。(更新视图而不重新请求页面)
前端路由
其实实现也很简单，就是匹配不同的url路径，解析，加载不同的组件，然后动态渲染区域html内容。
优势
良好的交互体验，用户无需刷新页面，页面显示流畅，良好的前后台分工模式减轻了服务器的压力。
劣势
不利于SEO，初始加载耗时较多。
2.hash模式
原理：是onhashchange事件，可以在window对象上监控。
vue路由器默认为哈希模式。
1.使用URL的散列来模拟完整的URL。
2.当URL改变时，不会重新加载页面，即单页应用程序。
2.当#后的hash发生变化时，不会导致浏览器向服务器发送请求，浏览器不发送请求也不会刷新页面，会触发hasChange事件，通过监测hash值的变化实现更新页面部分内容的操作。
window . onhashchange=function(event){
console.log(event.oldURL，event . new URL)；
设hash=location . hash . slice(1)；
document.body.style.color=哈希；
}
将为哈希模式创建哈希历史对象，当访问不同的路由时会发生两件事：
1.HashHistory.push()将新路由添加到浏览器访问历史堆栈的顶部，
2.HasHistory.replace()替换当前堆栈顶部的路径。
3.history模式
随着历史api的到来，前端路由开始进化。在hashchange前面，只能修改#后面的url片段，而history api则给了前端完全的自由。
历史api可以分为两部分：切换和修改。
3.1 切换历史状态
包括三种方法：后退、前进、前进和前进。
对应浏览器的前进、后退和跳转操作。
比如：(Google)浏览器只前进后退，不跳转。嗯，如果在前进和后退上长时间按鼠标，当前所有窗口的历史都会出来，这样就可以跳转了(也许叫跳转更合适):
history . go(-2)；//返回两次
history . go(2)；//前进两次
history . back()；//后退
h story . forward()；//前进
3.2 修改历史状态
包括两种方法：推送状态和替换状态。
这两个方法接收三个参数：stateObj、title、url。
history . push state({ color: red}， red ， red })
window . onpopstate=function(event){
console.log(事件.状态)
if(event . state event . state . color=== red ){
document . body . style . color= red ；
}
}
history . back()；
history . forward()；
步骤
1.通过pushstate在state对象中保存页面的状态。
2.当页面的url变回这个url时，可以通过event.state获得这个状态对象
3.因此，可以恢复页面状态。
4.这里的页面状态是页面字体颜色。其实滚动条位置、阅读进度、组件切换这些页面状态都可以存储在State中。
3.3 history模式怕啥
哈希和历史的区别
历史模式
1.通过历史api，我们失去了丑#，但它也有一个问题。
2.不怕前进，不怕后退，就怕刷新，f5
——历史模式会将URL修改为与普通请求后端的URL相同。如果后端没有配置与/user/id对应的路由处理，它将返回404错误。
3354所以这个实现需要服务器的支持，所有路由都需要重定向到根页面。
在灰模式下
1.hashchange在前面，只能更改#后的url片段。并且pushState设置的新URL可以是与当前URL具有相同来源的任何URL。
2.前端路由修改了#中的信息，但是浏览器在请求的时候并不玩，所以没有问题。但是在历史下，你可以自由修改路径。刷新时，如果服务器没有相应的响应或资源，每分钟都会刷出一个404。
总结
这就是这篇关于vue-router中哈希模式和历史模式的区别的文章。关于vue-router模式差异的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。