hash和history两种模式的区别

最新推荐文章于 2024-09-04 17:28:36 发布
最新推荐文章于 2024-09-04 17:28:36 发布
阅读量4.1k 收藏 40
点赞数 5
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49046027/article/details/120074867
版权
本文详细比较了前端路由Vue Router中hash模式与history模式的外观差异、原理、兼容性及工作方式，着重讲解了hash通过hashchange事件监听路由变化和history利用pushState/replaceState进行URL管理的方法。
摘要由CSDN通过智能技术生成

前端路由 vue-router 有两种模式 ,hash模式和history区别

一、hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#，外观上比hash 模式好看些

二、原理的区别（原理）

三、hash 能兼容到IE8， history 只能兼容到 IE10

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

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

Gabriel.c
关注
hash和history的区别
weixin_62226037的博客
11-23 647
hash模式在每次刷新页面时是直接更改“#”后的东西，history每次刷新会重新像后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错。（2）pushState 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；（1）pushState 设置的新 URL 可以是与当前 URL 同源的任意 URL；当真正需要通过URL向后端发送HTTP请求的时候，比如我们前端请求的url更改造成页面刷新时 在history模式下如果前端请求的url跟后端不匹配时会产生报错。
vue路由的两种模式，hash和history的区别
weixin_42371145的博客
02-03 1462
转自：https://www.cnblogs.com/lbcxq/p/12036788.html 1.直观区别： hash模式url带#号，history模式不带#号。 2.深层区别： hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。 如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传 功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的， 咱们把这个页面分享到第三方
vue-router的两种模式及区别
兔子juan的博客
08-26 9995
为什么要有 hash 和 history？ 对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 为了达到这一目的，浏览器当前提供了以下两种支持： hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。 比...
彻底讲清楚history和hash的区别
最新发布
一个爱好编程的程序员
09-04 1344
从原理出发理解路由的hash和history模式
hash路由和history路由的区别
热门推荐
weixin_62930485的博客
03-14 1万+
单页应用是在移动互联时代诞生的，它的目标是不刷新浏览器，而通过感知地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。 不同之处有三点。 一是原理不同。hash模式的实现原理是通过监听hashChange事件来实现的。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录，并更换地
vue-router的hash模式和history模式，
weixin_30493401的博客
07-15 135
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body...
history和hash的区别
qq_43278421的博客
09-30 9955
1.hash带#，history没有 2.history相对比较新，只能兼容ie10，hash能兼容ie8 3.跳转的时候hash只能修改#后面的内容，而history只要是同源的就可以 原理： hash：通过监听浏览器的onhashchange（）事件变化，查找对应的路由规则 history：利用H5的history中新增的两个API pushState（）和replaceState（）和一个事件onpopstate监听URL变化 pushState（）和replaceState（）可以用于浏览器的历史记
vue-router中的hash和history两种模式的区别
10-18
下面详细解释这两种模式的区别。 ### hash模式 hash模式是早期基于浏览器历史记录管理的前端路由模式。它利用了URL中的hash（即URL中的#符号）的变化来改变浏览器历史记录。当页面加载时，hash值不会被包含在HTTP...
Vue-router 中hash模式和history模式的区别
10-18
下面详细讲解这两种模式的区别和相关知识点。 一、hash模式和history模式的区别 1. URL显示方式不同 - hash模式的URL中会带有一个“#”符号，例如`***`，hash之后的部分就是路由地址。 - history模式的URL看起来...
history和hash两种路由模式的不同之处
Niucode的博客
01-19 1342
当使用历史模式的路由时，假设我们有一个单页应用，入口文件为index.html。用户在浏览器中访问https://example.com/about，表示用户想要访问关于页面。 如果没有服务器端配置支持，当用户刷新页面或直接访问https://example.com/about时，服务器会试图寻找对应的about.html文件来响应请求。然而，在单页应用中，并没有独立的about.html文件，所有页面内容都包含在index.html中。 因此，需要在服务器端进行配置以确保在刷新页面或直接访问特定路由时
hash值和history值详解区别
luoxiaonuan_hi的博客
05-07 3913
赠人玫瑰 Vue作为前端主流的渐进式开发框架被大量程序员熟知应用，Vue中为了构建SPA（single page web application，单页Web应用），需要引入前端路由系统，这也就是 Vue-Router 的意义 vue-router（前端路由）有两种模式，hash模式和history模式，这里来谈谈两者的区别。 1，什么是hash值 2，hash值和history...
Hash 模式和 History 模式的区别?
weixin_53818172的博客
07-13 347
Hash 模式和 History 模式是前端路由中常用的两种模式，它们在 URL 的形式和处理方式上存在一些区别。
关于hash和history的区别和使用
weixin_46589442的博客
07-15 1万+
刷新页面，资源请求失败，发送网络请求/MyHome/message/details/1/message001失败，因为服务器上没有这个请求（history模式存在这个问题，hash模式则无）
Hash模式和History模式的区别
10-19 512
首先强调一下 不管哪种模式，都是客户端路由的实现方式。 也就是当路径发生变化的时候，不会向服务器发生请求，是由JS监视路径的变化，然后根据不同的地址，渲染不同的内容；如果需要服务器内容的话，会发送 ajax 请求来获取。 表现形式的区别 Hash 模式路由中带着 # 号，# 后边的内容作为我们的路由地址，可以通过问号携带 URL 参数。 官方文档上说这种模式很丑，路径中带着一些跟路径无关的符号，比如 # 号和 ? 号 再来看 History 模式 History 模式的 URL 就是一个正常的 URL ，
vue router 的两种路由模式hash与history的区别
张营的技术博客
03-14 5007
文章目录两种模式特点总结 两种模式 前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 hash模式是通过改变锚点(#)来更新页面URL，并不会触发页面重新加载，我们可以通过window.onhashchange监听到hash的改变，从而处理路由。 history模式是通过调用window.history对象上的一系列方法来实现页面的无刷新跳转。 特点 hash hash，原本用来结合锚点控制页面视窗的位置，具有以下特点： 可以改变URL，但不会触发页面重新加载（hash的改变会记录
hash与history的区别
shiyzhang
04-09 7607
hash与history的区别 两种路由模式原因原因 对于 Vue 这类渐进式前端开发框架， 为了构建 SPA（单页面应用）， 需要引入前端路由系统， 这也就是 Vue-Router 存在的意义。 前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 因此有两种路由 hash: 即地址栏 URL 中的#符号（此 hash 不是密码学里的散列运算）。 比如这个 URL：http://www.abc.com/#/hello， hash 的值为 #/hello。它的特点在于：hash 虽然出现
hash和history路由模式的区别
07-12
路由模式和历史模式是Vue.js的两种不同的路由方式。 路由模式使用哈希值（#）在URL中标记路由信息，例如：http://www.example.com/#/home。这种方式在浏览器中也会被称为锚点（Anchor）。使用路由模式时，路由信息...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值