关于hash和history的区别和使用

最新推荐文章于 2024-08-04 21:39:33 发布
最新推荐文章于 2024-08-04 21:39:33 发布
阅读量1.1w 收藏 57
点赞数 7
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46589442/article/details/125796515
版权

一、区别

1、 history和hash都是利用浏览器的两种特性实现前端路由，history是利用浏览历史记录栈的API实现，hash是监听location对象hash值变化事件来实现

2、 history的url没有’#'号，hash反之

3、 相同的url，history会触发添加到浏览器历史记录栈中，hash不会触发，history需要后端配合，如果后端不配合刷新新页面会出现404，hash不需要

4、
HashRouter的原理：通过window.onhashchange方法获取新URL中hash值，再做进一步处理 HistoryRouter的原理：通过history.pushState 使用它做页面跳转不会触发页面刷新，使用window.onpopstate 监听浏览器的前进和后退，再做其他处理

二、使用

举例说明history模式

1、现有一个这样的页面（Vue2）在这里插入图片描述在这里插入图片描述
2、设置路由模式

在这里插入图片描述
3、打包
使用webpack的npm build命令，生成以下文件
在这里插入图片描述
4、模拟一个服务器（nodejs的express）
初始化
在这里插入图片描述
在这里插入图片描述

调试
在这里插入图片描述
在这里插入图片描述

5、把打包好的文件放到服务器
在这里插入图片描述

6、访问，路由跳转不涉及网络请求
在这里插入图片描述
7、刷新页面，资源请求失败，发送网络请求/MyHome/message/details/1/message001失败，因为服务器上没有这个请求（history模式存在这个问题，hash模式则无）
在这里插入图片描述
8、解决办法
使用connect-history,根据npm官方文档
在这里插入图片描述
在这里插入图片描述
9、再次调试，刷新后依旧没问题
在这里插入图片描述

cc.ChenLy
关注
专栏目录
hash和history的区别
weixin_62226037的博客
11-23 627
hash模式在每次刷新页面时是直接更改“#”后的东西，history每次刷新会重新像后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错。（2）pushState 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；（1）pushState 设置的新 URL 可以是与当前 URL 同源的任意 URL；当真正需要通过URL向后端发送HTTP请求的时候，比如我们前端请求的url更改造成页面刷新时 在history模式下如果前端请求的url跟后端不匹配时会产生报错。
hash和history路由的区别
发果叁
08-04 3112
在了解路由模式前，我们先看下 什么是单页面应用，vue-router 的实现原理是怎样的，这样更容易理解路由。
hash模式与history模式的区别(详细版)
最新发布
qq505751223的博客
08-04 723
前端路由的概念起源于单页面应用（SPA, Single Page Application）的发展。SPA通过动态内容更新而不是重新加载整个页面来提高用户体验。前端路由允许开发者定义应用中的不同视图，以及如何在用户与应用交互时导航这些视图。前端路由的和两种模式是实现单页面应用（SPA）中页面导航的两种不同方法。以下是它们之间的主要区别，以及如何配置模式的详细说明。URL结构（表面区别）:工作原理:浏览器历史记录:服务器配置:SEO和用户体验:兼容性:Apache: 使用模块。Nginx: 使用指令。Node.
hash和history两种模式的区别
————————————————————————————————
09-03 4150
前端路由 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会追加历史记录，并更换地
history和hash的区别
又一个四季在轮回
09-13 2802
hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。 比如这个 URL：http://www.aaa.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。 history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持
hash值和history值详解区别
luoxiaonuan_hi的博客
05-07 3806
赠人玫瑰 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-18
下面详细讲解这两种模式的区别和相关知识点。 一、hash模式和history模式的区别 1. URL显示方式不同 - hash模式的URL中会带有一个“#”符号，例如`***`，hash之后的部分就是路由地址。 - history模式的URL看起来...
一文了解vue-router之hash模式和history模式
10-16
本文的主题是关于Vue.js中用于前端路由管理的库vue-router的两种路由模式：hash模式和history模式。它们是vue-router提供的两种主要的导航方式，各有特点，适用于不同的场景和需求。 首先，让我们详细了解一下hash...
vue-router的hash模式和history模式，
weixin_30493401的博客
07-15 123
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body...
history和hash两种路由模式的不同之处
Niucode的博客
01-19 1174
当使用历史模式的路由时，假设我们有一个单页应用，入口文件为index.html。用户在浏览器中访问https://example.com/about，表示用户想要访问关于页面。 如果没有服务器端配置支持，当用户刷新页面或直接访问https://example.com/about时，服务器会试图寻找对应的about.html文件来响应请求。然而，在单页应用中，并没有独立的about.html文件，所有页面内容都包含在index.html中。 因此，需要在服务器端进行配置以确保在刷新页面或直接访问特定路由时
Vue-router：13、Hash模式与History模式
tinglis的博客
03-04 3000
Vue-router：13、Hash模式与History模式 13.1 Hash模式与History模式区别 前端路由中，不管是什么实现模式，都是客户端的一种实现方式，也就是当路径发生变化的时候，是不会向服务器发送请求的。 如果需要向服务器发送请求，需要用到ajax方式。 两种模式的区别 首先是表现形式的区别 Hash模式 https://www.baidu.com/#/showlist?id=22256 hash模式中路径带有#, #后面的内容作为路由地址。可以通过问号携带参数。 当然这种模式相对来说
Hash 模式和 History 模式的区别?
weixin_53818172的博客
07-13 333
Hash 模式和 History 模式是前端路由中常用的两种模式，它们在 URL 的形式和处理方式上存在一些区别。
Hash模式和History模式的区别
10-19 503
首先强调一下 不管哪种模式，都是客户端路由的实现方式。 也就是当路径发生变化的时候，不会向服务器发生请求，是由JS监视路径的变化，然后根据不同的地址，渲染不同的内容；如果需要服务器内容的话，会发送 ajax 请求来获取。 表现形式的区别 Hash 模式路由中带着 # 号，# 后边的内容作为我们的路由地址，可以通过问号携带 URL 参数。 官方文档上说这种模式很丑，路径中带着一些跟路径无关的符号，比如 # 号和 ? 号 再来看 History 模式 History 模式的 URL 就是一个正常的 URL ，
了解一下最浅层的vue 路由(router)的使用
weixin_52139966的博客
06-04 201
Vue Router 是 Vue.js 官方的路由管理器，或者说是SPA（单页应用）的路径管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。 实现原理: SPA(single page application):单一页面
vue路由hash和history区别
05-17
Vue 路由中 hash 模式和 history 模式都是用来管理路由的方式，它们的主要区别在于 URL 的形式和浏览器的行为。 1. hash 模式：URL 中带有 # 符号，例如：http://example.com/#/home。在 hash 模式下，浏览器不会向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值