hash和history的原理和区别

2024-06-17 18:14:20

原理区别

hash原理：hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则
history原理：利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化history模式

利用了HTML5 History Interface中新增的pushState()和replaceState()方法，这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础上，他们提供了对当前浏览器进行修改的功能，只是当它们被修改时，虽然浏览器的URL发生了变化，但是不会立即向后端服务器发送请求，但是如果点击刷新，就会重新向后端服务器发送请求。

hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#，外观上比hash 模好看些hash回车刷新会加载到地址栏对应的页面，history一般就是404掉了hash 能兼容到IE8， history 只能兼容到 IE10；

hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段）；

虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的。

谢谢阅读！

美好的明天会感谢今天努力的自己！

hash和history的原理和区别相关推荐

hash值和history值详解区别
赠人玫瑰 Vue作为前端主流的渐进式开发框架被大量程序员熟知应用,Vue中为了构建SPA(single page web application,单页Web应用),需要引入前端路由系统,这也就是 V ...
Hash 和 History模式的区别
表现形式的区别 Hash 模式 https://music.163.com/#/playlist?id=3102961864(有# 号,# 号后面带路由地址,?号携带 url 参数,官方文档说这种模式 ...
vue路由的两种模式：hash与history的区别
前言:众所周知,vue-router有两种模式,hash模式和history模式,下面来看看两者的区别. 一.基本情况直观区别:hash模式url带#号,history模式不带#号. 1.hash模 ...
浅谈前端路由原理hash和history
浅谈前端路由原理hash和history
history模式监听_面试题：VueRouter中的 hash 模式和 history 模式有什么区别
面试题:VueRouter中的 hash 模式和 history 模式有什么区别 hash模式 hash 模式的路由中带有 # 号 hash 模式通过 window.onhashchange 方法监听 ...
vue-router的两种模式（hash和history）及区别
为什么要有hash 和history? 对于Vue这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-Router存在的意义.前端路由的核心,就在于--改变试图 ...
hash 和 history 两种模式
区别 hash模式下,仅hash符号之前的内容会被包含在请求中,如 http://www.11.com 因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误: history模式下,前端 ...
“约见”面试官系列之常见面试题第二十六篇之vue-router的hash和history（建议收藏）
这篇文章主要介绍了Vue-router 中hash模式和history模式的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Vue-router 中hash模式和hi ...
前端路由模式详解（hash和history）
前端路由模式详解(hash和history) 前端路由有两种模式:hash 模式和 history 模式,接下来分析这两种模式的实现方式和优缺点. hash 模式 hash 模式是一种把前端路由的路径 ...

最新文章

热门文章