浏览器hash和history的区别

最新推荐文章于 2024-06-25 09:35:25 发布
最新推荐文章于 2024-06-25 09:35:25 发布
阅读量258 收藏
点赞数 2
分类专栏： 原理 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42875598/article/details/118566275
版权
本文探讨了Vue和React框架中两种前端路由模式——Hash模式和History模式。Hash模式通过#号监听onhashchange事件实现页面不刷新更新，而History模式利用popState事件，需后端配合，使得URL更符合传统形式。了解这两种模式的区别对于前端开发者至关重要。
摘要由CSDN通过智能技术生成

两者的目的：vue或者react框架中，url变化不去请求服务器

不同点：很直观区别就是hash模式有带#,history模式就是一个正常的传统的路由。
hash模式监听的是onhashchange 方法来控制前端路由，history模式是监听popState来控制前端路由，history模式需要后端做一个支持，在找不到页面时候指向index页面，而hash模式不需要

coding者
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
hash和history的区别
weixin_62226037的博客
11-23 589
hash模式在每次刷新页面时是直接更改“#”后的东西，history每次刷新会重新像后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错。（2）pushState 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；（1）pushState 设置的新 URL 可以是与当前 URL 同源的任意 URL；当真正需要通过URL向后端发送HTTP请求的时候，比如我们前端请求的url更改造成页面刷新时 在history模式下如果前端请求的url跟后端不匹配时会产生报错。
hash 和history 的原理和区别
lllllrp的博客
08-22 267
目前单页应用（SPA）越来越成为前端主流，单页应用一大特点就是使用前端路由，由前端来直接控制路由跳转逻辑，而不再由后端人员控制，这给了前端更多的自由。hash模式和history模式，下面分别详细说明。
Hasher - 助您轻松处理加密哈希和转换的浏览器扩展
最新发布
gitblog_00028的博客
06-25 282
Hasher - 助您轻松处理加密哈希和转换的浏览器扩展 项目地址:https://gitcode.com/s12v/hasher 项目介绍 Hasher 是一款强大的Chrome浏览器扩展，同时也提供适用于其他浏览器的独立版本。这款工具旨在为程序员和系统管理员提供便捷的服务，让您在浏览器中即可计算各种加密散列值，执行哈希消息认证码（HMAC）计算，甚至进行编码和解码操作。 项目技术分析 Hash...
hash和history两种模式的区别
————————————————————————————————
09-03 4114
前端路由 vue-router 有两种模式 ,hash模式和history区别 一、hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#，外观上比hash 模式好看些 二、原理的区别（原理） 三、hash 能兼容到IE8， history 只能兼容到 IE10 四、由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段）；虽然hash路径出现在URL中，但是不会出现在H.
hash路由和history路由的区别
热门推荐
weixin_62930485的博客
03-14 1万+
单页应用是在移动互联时代诞生的，它的目标是不刷新浏览器，而通过感知地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。 不同之处有三点。 一是原理不同。hash模式的实现原理是通过监听hashChange事件来实现的。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录，并更换地
web页面的hash模式和history模式
蒙双眼看世界
04-16 2069
web页面的hash模式
hash值和history值详解区别
luoxiaonuan_hi的博客
05-07 3608
赠人玫瑰 Vue作为前端主流的渐进式开发框架被大量程序员熟知应用，Vue中为了构建SPA（single page web application，单页Web应用），需要引入前端路由系统，这也就是 Vue-Router 的意义 vue-router（前端路由）有两种模式，hash模式和history模式，这里来谈谈两者的区别。 1，什么是hash值 2，hash值和history...
vue-router中的hash和history两种模式的区别
10-18
### hash模式和history模式的区别 1. **URL变化**：hash模式会将路由信息放在URL的#后面，而history模式的URL看起来更干净，没有#。 2. **历史记录**：hash模式改变时，浏览器的历史记录会增加一个记录项。history...
区分vue-router的hash和history模式
10-14
Vue Router 是 Vue.js 应用中的官方路由库，它提供了两种模式：hash 和 history，用于管理SPA（单页面应用）的路由。理解这两种模式的区别对于优化用户体验和避免潜在的技术问题至关重要。 **一、hash模式** 在...
一文了解vue-router之hash模式和history模式
10-16
本文的主题是关于Vue.js中用于前端路由管理的库vue-router的两种路由模式：hash模式和history模式。它们是vue-router提供的两种主要的导航方式，各有特点，适用于不同的场景和需求。 首先，让我们详细了解一下hash...
Vue-router 中hash模式和history模式的区别
10-18
一、hash模式和history模式的区别 1. URL显示方式不同 - hash模式的URL中会带有一个“#”符号，例如`***`，hash之后的部分就是路由地址。 - history模式的URL看起来更像普通的HTTP请求路径，例如`***`，与传统的...
关于hash和history的区别和使用
weixin_46589442的博客
07-15 1万+
刷新页面，资源请求失败，发送网络请求/MyHome/message/details/1/message001失败，因为服务器上没有这个请求（history模式存在这个问题，hash模式则无）
history和hash的区别
qq_43278421的博客
09-30 9876
1.hash带#，history没有 2.history相对比较新，只能兼容ie10，hash能兼容ie8 3.跳转的时候hash只能修改#后面的内容，而history只要是同源的就可以 原理： hash：通过监听浏览器的onhashchange（）事件变化，查找对应的路由规则 history：利用H5的history中新增的两个API pushState（）和replaceState（）和一个事件onpopstate监听URL变化 pushState（）和replaceState（）可以用于浏览器的历史记
vue的history和hash实现
zyp_kim的博客
03-09 959
只是纯属记录，以便我可以回来查找这些知识点而已。。。一、点击a标签是会增加history,pushState会增加，刷新不会，浏览器内置后退、前进不会。二、history三种方法：(1)history.go(type);=====>type:number；如果number为“正数”则相当于网页的“前进“，为“负数”，则为后退第number页(2)history.back(); ====&gt...
测评指纹浏览器\性能\功能\防关联效果
kuajingvs的博客
09-10 170
浏览器指纹是通过浏览器可以看到网站的配置和信息的设定跟踪网络浏览器的方法，浏览器指纹就像我们手中的指纹一样，具有个人的识别度，但现阶段浏览器指纹识别的是浏览器。获取浏览器具有识别度的信息，计算一些值，这个值是浏览器的指纹。认识度的信息可以是UA、时区、地理位置、使用的语言等，选择的信息决定了浏览器指纹的正确性。 指纹是综合了各种信息的集合，信息有： 浏览器安装的插件，我们在浏览网页的时候看到浏览器上的视频是通过视频插件来看的，看到的网站代码是脚本文件来显示的。所以任何浏览器会有任何的插件，插件的牌.
HTML页面的哈希（hash）路由原理+原生js案例
Lee的430博客
04-28 5054
<!-- * 场景:不刷新页面，对页面的局部内容进行更改 *方案1：ajax 方法 *方案2：哈希（hash）路由原理 *方案2讲解：监听浏览器的url中的hash（url的#后面的文本——锚文本）值，进行更改内容 --> <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UT...
vue路由hash和history区别
05-17
Vue 路由中 hash 模式和 history 模式都是用来管理路由的方式，它们的主要区别在于 URL 的形式和浏览器的行为。 1. hash 模式：URL 中带有 # 符号，例如：http://example.com/#/home。在 hash 模式下，浏览器不会向服务器请求新的页面，而是只会修改页面的锚点，从而实现页面的切换。这种模式可以兼容低版本的浏览器，但是 URL 不太美观。 2. history 模式：URL 中没有 # 符号，例如：http://example.com/home。在 history 模式下，浏览器会向服务器请求新的页面，服务器返回相应的页面。这种模式可以使 URL 更加美观，但是需要服务器端的支持。 总的来说，hash 模式适用于简单的页面应用，而 history 模式适用于复杂的单页面应用（SPA），需要服务器端的支持。在 Vue 中，默认使用的是 hash 模式。如果需要使用 history 模式，需要在路由配置中设置 mode 为 "history"。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值