Hash模式和History模式的区别

最新推荐文章于 2024-09-04 17:28:36 发布
最新推荐文章于 2024-09-04 17:28:36 发布
阅读量233 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Janent168/article/details/109371257
版权

表现形式的区别

原理的区别

  • Hash模式是基于锚点，以及onhashchange事件

  • Hostory模式是基于HTML5中的History API

    History.pushState() IE10以后才支持

    history.replaceState()

History 需要服务器的支持

单页应用中，服务端不存在 http://www.testurl.com/login 这样的地址会返回找不到该页面

在服务端应该除了静态资源外都返回单页应用的 index.html

Hash模式

  • URL中#后面的内容作为路径地址

  • 监听hashchange事件

  • 根据当前路由地址找到对应组件重新渲染

 

History模式

  • 通过History.pushState()方法改变地址栏

  • 监听popstate事件

  • 根据当前路由地址找到对应组件重新渲染

侒然
关注
专栏目录
Html5 history对象详解
qq_36723759的博客
04-15 1547
这个文章记录的是 html5 原生的 history 对象，不是 vue-router 的 history。 作用 history 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。window.history: 返回当前会话的 history 状态。 属性 history.length 只读,返回一个整数，该证书表示会话历史中元素的数目，包括当前加载的页。 history.scrollRestoration 允许 web 应用程序在历史导航上显示的设置默认滚动恢复行为。此属性可以
Hash与History模式的区别
Sodaxiang的博客
01-22 1383
在react或vue的前端渲染中，通常会使用到hash或者history两种路由模式。 hash路由：锚点操作，通过hash值的变化感知路由的变化，优点是兼容性高，缺点是带有#号不好看，这种路由只需要客户端支持，不需要服务端。 history路由：基于HTML5的history模式，监听URL的变化，需要客户端和服务端共同支持。 1. hash路由 hash是浏览器URL中#后面的内容，包含#。hash是url的锚点，改变#后的内容，浏览器会加载相应位置的内容，不会重新发起请求。 当页面中的has.
hash路由和history路由的区别
热门推荐
weixin_62930485的博客
03-14 1万+
单页应用是在移动互联时代诞生的，它的目标是不刷新浏览器，而通过感知地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。 不同之处有三点。 一是原理不同。hash模式的实现原理是通过监听hashChange事件来实现的。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录，并更换地
彻底讲清楚history和hash的区别
最新发布
一个爱好编程的程序员
09-04 1384
从原理出发理解路由的hash和history模式
vue-router的hash模式和history模式，
weixin_30493401的博客
07-15 136
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body...
Hash 模式和 History 模式的区别
小卡酷谋的博客
08-03 227
原理的区别 Hash 模式是基于锚点，以及onhashchange事件 通过锚点的值作为路由地址，当路由地址发生变化，触发onhashchange事件，根据路径决定页面上呈现的内容 History 模式是基于HTML5中的History API history.pushState() IE10以后才支持 （有兼容性问题） history.replaceState() pushState() 方法与 push()方法的区别： 当调用history.push()时，路径会发生变化，这时要向.
hash模式和history模式区别
weixin_42560424的博客
06-06 1260
中的路径部分被用来管理路由，当切换路由时，浏览器会向服务器发送请求，服务器需要正确配置以避免。时，浏览器不会向服务器发送请求，而是通过。，而不会触发页面重新加载。部分被用来模拟一个完整的。
Vue-router 中hash模式和history模式的区别
10-18
下面详细讲解这两种模式的区别和相关知识点。 一、hash模式和history模式的区别 1. URL显示方式不同 - hash模式的URL中会带有一个“#”符号，例如`***`，hash之后的部分就是路由地址。 - history模式的URL看起来...
history模式与hash模式的区别
yms869的博客
10-09 236
history模式与hash模式的区别
History模式和Hash模式区别
weixin_43733080的博客
03-09 128
Vue Router 是 Vue.js 官方的路由插件，它和 Vue.js 是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在 vue-router 单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。
hash和history两种模式的区别
————————————————————————————————
09-03 4175
前端路由 vue-router 有两种模式 ,hash模式和history区别 一、hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#，外观上比hash 模式好看些 二、原理的区别（原理） 三、hash 能兼容到IE8， history 只能兼容到 IE10 四、由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段）；虽然hash路径出现在URL中，但是不会出现在H.
vue router 的两种路由模式hash与history的区别
张营的技术博客
03-14 5017
文章目录两种模式特点总结 两种模式 前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 hash模式是通过改变锚点(#)来更新页面URL，并不会触发页面重新加载，我们可以通过window.onhashchange监听到hash的改变，从而处理路由。 history模式是通过调用window.history对象上的一系列方法来实现页面的无刷新跳转。 特点 hash hash，原本用来结合锚点控制页面视窗的位置，具有以下特点： 可以改变URL，但不会触发页面重新加载（hash的改变会记录
hash和history的区别
Black_Straight的博客
06-06 336
hash和history的区别
history和hash的区别
又一个四季在轮回
09-13 2811
hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。 比如这个 URL：http://www.aaa.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。 history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持
hash模式和history模式的区别
weixin_45616633的博客
12-14 2270
1、hash模式 什么是hash模式 URL中带有"#"号。 例：http://localhost:8080/#/login hash模式的特点 hash模式下，前端路由修改的是#号中的信息，对后端完全没有影响，因此改变hash也不会重新加载整个页面。如果修改不存在的#abc页面，页面也不会跳转，history模式则刚好相反，没有对应的页面就会出现404。 2、history模式 什么是history模式 URL中没有"#"号。 例:http://localhost:8080/login history模式
路由的hash和history模式的区别
青春木鱼的博客
08-04 4221
单页应用是在移动互联时代诞生的，它的目标是不刷新整体页面，通过地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。hash模式是通过监听hashChange事件来实现的，history模式是通过pushState方法+popstate事件来实现的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值