hash和history

已于 2022-08-25 20:11:37 修改
阅读量284 收藏
点赞数
文章标签： 哈希算法 算法 javascript 前端 json
于 2022-08-18 09:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45838276/article/details/126393115
版权

hash

1、由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 onhashchange 事件（hashchange只能改变 # 后面的url片段）；虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面

2、触发 onhashchange 属性事件当URL哈希改变时。onhashchange 属性是HTML5中的新特性

history

1、history必须要和后端保持一致，路由全覆盖，否则报404

2、pushState（）和replaceState（）可以用于浏览器的历史记录栈，通过back、forward、go可以对当前浏览器进行修改，当他们发生修改的时候，尽管url变化了，但是不会立即向后端服务器发送请求，除非点击刷新

3、history404报错解决方案：后台使用nginx重定向到对应页面

007。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈hashchange和popstate事件触发条件
爱酸的博文
12-09 9053
hashchange和popstate触发条件
区分vue-router的hash和history模式
01-21
一、概念 　为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-...　它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。 　2
history和hash的区别
又一个四季在轮回
09-13 2748
hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。 比如这个 URL：http://www.aaa.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。 history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持
历史管理-onhashchange&window.history
yixiao_naihe的专栏
12-01 832
网页记录历史记录两种方法 1.onhashchange事件  改变hash值来管理    hash值：http://test.con#hash #后面内容即为hash值     设置网页的hash值  window.location.hash = "要设置的hash值"     获取hash值：var hash = window.location.has
onhashchange
05-17 3289
onhashchange事件 触发条件 location.hash发生改变的时候触发, *注意hashchange事件触发并不会刷新页面,而只是页面的滚动 *准确来说是展示对应的锚点,张鑫旭大神的锚点解说 默认参数 window.onhashchange = function(e){} /* e --> HashChangeEvent 包含 { old...
hashchange和popstate事件触发条件
最新发布
weixin_43856422的博客
12-12 3166
hash是URL中#后面那部分，同时修改hash值不会引起页面的刷新，也不会向服务器重新发送请求。通过hashchange事件可以监听它的变化。备注：以上三种方式均可以触发hashchang事件, pushState和replaceState均不能触发hashchang事件。history提供了popstate监听事件，但是只有以下两种情况会触发该事件。
vue-router中的hash和history两种模式的区别
10-18
大家都知道vue-router有两种模式，hash模式和history模式，这里来谈谈vue-router中的hash和history两种模式的区别。感兴趣的朋友一起看看吧
Vue-router 中hash模式和history模式的区别
10-18
主要介绍了Vue-router 中hash模式和history模式的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
onhashchange 事件(监控地址栏的url变化，当然，url存在锚部分)
weixin_45899022的博客
09-27 646
onhashchange 事件在当前 URL 的锚部分(以 ‘#’ 号为开始) 发生改变时触发 。 http://www.example.com/test.htm#part2 - 这个 URL 中的锚部分为 #part2。 HTMl中： <element onhashchange="方法名"> JavaScript 中:(object是个具体的对象，例如：window/document.body) object.onhashchange=function(){console.log("锚部分发
hash和history的区别
weixin_42316501的博客
07-21 441
虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面，基本都是使用hash来实现前端路由的。所以hash模式在每次刷新页面时是直接更改“#”后的东西，history每次刷新会重新像后端请求整个网址，也就是重新请求服务器。1.hash就是指url后面的#号以及后面的字符，history没有带#，外观上比hash模式好看些。history模式URL就要和后端进行一致，所以要改为history也需要后端的配合，否则会报错。...
vue路由的两种模式：hash与history的区别
qq_26780317的博客
06-11 1万+
前言：众所周知，vue-router有两种模式，hash模式和history模式，下面来看看两者的区别。 一、基本情况 直观区别：hash模式url带#号，history模式不带#号。 1.hash模式 hash就是指url尾巴后的#号以及后面的字符。这里的#和css里的#是一个意思。hash也被称为锚点，本身是用来做页面定位的，它可以是对应的id元素显示在可视区域内。 由于hash值变化不会导致游览器向服务器发出请求，而且hash改变会...
vue-router两种模式:hash模式和history模式
热门推荐
E_li_na的博客
05-06 2万+
为了构建SPA，vue引入了前端路由系统vue-router。 vue-route有两种模式：history模式和hash模式。 1. hash模式（vue-router默认hash模式） hash模式背后的原理是onhashchange事件。 window.onhashchange=function(){ let hash=location.hash.slice(1); do...
onhashchange事件
weixin_33782386的博客
10-24 166
onhashchange事件是针对AJAX无缝刷新导致后退键失效而产生的事件，因此属于一个够新的事件，浏览器兼容性如下： Feature Chrome Firefox IE Opera Safari support 5.0 3.6 (1.9.2) 8.0 10.6 5.0 由于chrome引发的版本号竞赛，现在chrome20+,firefox16+,opera12了，因...
JS--hashchange事件--使用/教程
IT利刃出鞘的博客
08-09 1390
本文介绍hashchange事件的用法。 hashchange事件是html5新增的api，用来监听浏览器链接的hash值变化。 URL的片段标识符（URL 中 # 后面的部分）改变时会触发hashchange事件。...
触发路由——hashchange事件
吃蛋糕的居居
06-05 363
JS: var EventUtil = { //事件绑定兼容性 addHandler: function(element, type, handler) { //传入形参 if (element.addEventListener) { //新版本的兼容性 element.addEventListener(type, handler, false); } else
html5 hashchange,hashchange事件
weixin_30166291的博客
06-26 570
hashchange事件是html5新增的api，用来监听浏览器链接的hash值变化。目前流行的spa框架的路由都有使用到该特性，接下来简单介绍下：当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号)属性类型描述target上下文为window对象typeevent类型bubbles事件是否能冒泡cancelable事件是否能被取消oldURL跳转...
记录关于hashchange事件
weixin_43831261的博客
08-14 697
关于hashchange 在vue中使用的要点 window.addEventListener('hashchange', (e) => { //do something }, false); 这里需要注意： 1，在hashchange中获取到的router的参数是变化之前的参数，如果要根据这个使用需要多加注意。 2,自mounted中使用的话初次不会执行hashchange 3，回调的e中回返回 e.oldURL和e.newURL 即 hash变化前后的地址内容 ...
hashchange的简单理解与应用
weixin_44757068的博客
03-16 2410
hash是什么 hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分，一般有当前页面中href中#地址触发 hash的改变不会导致页面重新加载； 使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id（或name）与hash值一样的元素的位置； 通过window.location.hash属性获取和设置hash值。 hashchange事件 （window.onh...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值