Hash 和 History 模式

最新推荐文章于 2024-04-25 11:57:52 发布
最新推荐文章于 2024-04-25 11:57:52 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37883657/article/details/115510691
版权
本文详细介绍了Vue中Hash和History模式的区别。Hash模式利用#号及onhashchange事件进行路由切换，而History模式基于HTML5 History API，需要服务器配置以避免404错误。History模式在Node.js和Nginx服务器上的配置方法也进行了演示。
摘要由CSDN通过智能技术生成

 Hash 和 History 模式的区别

首先需要强调的是不管哪种模式都是客户端路由的实现方式，也就是当路径放生变化之后不会向服务器发送请求，是用 js 监视路径的变化的变化，然后根据不同的地址渲染不同的内容如果需要服务端内容的话，需要使用Ajax发送请求。

 

表现形式的区别

- Hash 模式

https://music.136.com/#/user?id=10029 这种模式的地址中带有 # 号， # 号后面就是路由地址可以使用 ？ 携带路由参数，官方文档中说这种模式很丑，路径中带着一些与地址无关的符号，比如井号和问好。

- History 模式

https://music.136.com/user/10029 

 

原理的区别

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

通过锚点的值作为路由地址，当地址发生变化后触发 onhashchange 事件，根据路径决定页面渲染的内容。

- History 模式是基于 HTML5 中的 History API

 - history.pushState()  IE10 以后才支持

 - history.relplaceState() 

 

pushState 方法和 push 方法的区别

当调用 history.push 方法的时候，路径会发生变化，这个时候要想服务器发送请求，而调用 history.pushState 方法不会向

最低0.47元/天 解锁文章
Daisy__yangyang
关注
专栏目录
hash和history的区别
weixin_62226037的博客
11-23 617
hash模式在每次刷新页面时是直接更改“#”后的东西，history每次刷新会重新像后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错。（2）pushState 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；（1）pushState 设置的新 URL 可以是与当前 URL 同源的任意 URL；当真正需要通过URL向后端发送HTTP请求的时候，比如我们前端请求的url更改造成页面刷新时 在history模式下如果前端请求的url跟后端不匹配时会产生报错。
Vue-router：13、Hash模式与History模式
tinglis的博客
03-04 2993
Vue-router：13、Hash模式与History模式 13.1 Hash模式与History模式区别 前端路由中，不管是什么实现模式，都是客户端的一种实现方式，也就是当路径发生变化的时候，是不会向服务器发送请求的。 如果需要向服务器发送请求，需要用到ajax方式。 两种模式的区别 首先是表现形式的区别 Hash模式 https://www.baidu.com/#/showlist?id=22256 hash模式中路径带有#, #后面的内容作为路由地址。可以通过问号携带参数。 当然这种模式相对来说
深入理解 hash 和 history：网页导航的基础(上)
你若盛开，清风自来
12-15 1237
Hash 模式：URL 中的 hash 值只是客户端的一种状态，不会被发送到服务器。hash 值的改变都会在浏览器的访问历史中增加一个记录，因此可以通过浏览器的前进、回退按钮控制 hash 的切换。可以通过 JavaScript 对 location.hash 进行赋值，来改变 URL 中的 hash 值。可以用 hashchange 事件监听 hash 值的变化，从而对页面进行跳转并渲染。
hash和history的原理和区别
麋鹿的鹿
01-18 1322
hash 众所周知，vue-router有两种模式，hash模式和history模式，这里来谈谈两者的区别。 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件 window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.
hash值和history值详解区别
luoxiaonuan_hi的博客
05-07 3771
赠人玫瑰 Vue作为前端主流的渐进式开发框架被大量程序员熟知应用，Vue中为了构建SPA（single page web application，单页Web应用），需要引入前端路由系统，这也就是 Vue-Router 的意义 vue-router（前端路由）有两种模式，hash模式和history模式，这里来谈谈两者的区别。 1，什么是hash值 2，hash值和history...
Vue-router 中hash模式和history模式的区别
12-10
Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:”hash”;  mode:”history”;  hash模式和history模式的...
Hash模式与History模式
Seric_xiao的博客
09-26 2147
Hash模式与History模式区别 前端路由中，不管是什么实现模式，都是客户端的一种实现方式，也就是当路径发生变化的时候，是不会向服务器发送请求的。 如果需要向服务器发送请求，需要用到ajax方式。 两种模式的区别 首先是表现形式的区别 Hash模式 https://www.baidu.com/#/showlist?id=22256 hash模式中路径带有#, #后面的内容作为路由地址。可以通过问号携带参数。 当然这种模式相对来说比较丑，路径中带有与数据无关的符号，例如#与? His
前端路由的两种模式：hash模式和 history模式
weixin_44209082的博客
05-02 7066
前端路由实现方式 在单页面web网页中, 单纯的浏览器地址改变，网页不会重载，如单纯的hash网址改变网页不会变化，因此我们的路由主要是通过监听事件，并利用js实现动态改变网页内容，有两种实现方式：     hash模式：监听浏览器地址hash值变化，执行相应的js切换网页     history模式：利用history API实现url地址改变，网页内容改变 hash与history的区别 hash history url显
hash路由模式与history路由模式
麦呢头冷的博客
11-02 8645
1. hash路由模式 hash模式：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号 hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题 hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user 参考: hashChange 2. history模式 history模式： 美化后的hash模式，路...
react使用hashHistory实现类似get方法带参数跳转
01-08
主页router 前一页引入hashHistory import { HashRouter } from 'react-router-dom'; 传参： btnClick() { hashHistory.push({ pathname: '/apartmentReserve/'+yourApartmentId, query: { name:yourApartmentname, price:yourApartmentprice }, }) } 或者通过to 传参： 点击跳转
路由的hash和history模式的区别
青春木鱼的博客
08-04 3598
单页应用是在移动互联时代诞生的，它的目标是不刷新整体页面，通过地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。hash模式是通过监听hashChange事件来实现的，history模式是通过pushState方法+popstate事件来实现的。
hash与history原理
SUE_DONG的博客
08-16 274
hash 首次加载 首次进入页面主动获取地址栏的hash值 用hash值去匹配路由规则 找到要渲染的组件进行渲染 监听hashChange事件 当hash值发生变化获得新的hash值 根据路由规则去渲染组件 export default { name: "router-view", data() { return { component: null, }; }, render(h) { return h(this.component); //显示组件
history和hash两种路由模式的不同之处
Niucode的博客
01-19 1071
当使用历史模式的路由时，假设我们有一个单页应用，入口文件为index.html。用户在浏览器中访问https://example.com/about，表示用户想要访问关于页面。 如果没有服务器端配置支持，当用户刷新页面或直接访问https://example.com/about时，服务器会试图寻找对应的about.html文件来响应请求。然而，在单页应用中，并没有独立的about.html文件，所有页面内容都包含在index.html中。 因此，需要在服务器端进行配置以确保在刷新页面或直接访问特定路由时
使用ajax和history.pushState无刷新改变页面URL
weixin_34397291的博客
05-10 209
表现 如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。 是什么有这么强大的功能呢？ HTML5里引用了新的API，history.pushState和history.replaceState，就是通过...
history模式 nginx配置_hash和history模式的区别
weixin_31862047的博客
12-12 1578
1. hash和history模式的区别小白回答：hash的url上#，history上没有大牛解答：hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。如果用户考虑url的规范，需要推广宣传，或者开发的h5需要放在第三方的app里，有的app里面url是不允许带有#号的，需要将#号去除，那么就要使用history模式前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。...
WHAT - 浏览器 hash 和 history 路由
最新发布
weixin_58540586的博客
04-25 1222
浏览器中的路由系统通常可以通过两种方式来实现：hash 路由和 history 路由。今天从原理和优势以及底层具体实现和注意事项等维度来为大家介绍一下。
Vue进阶（七十七）：vue 路由的两种模式：hash与history
IT全栈 华强工作室
09-19 2632
对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于改变视图的同时不会向后端发出请求。 一、为了达到这个目的，浏览器提供了以下两种支持： 1、hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算）。 比如这个URL：http://www.abc.com/#/hello, hash...
学习笔记：location.hash和history.pushState()
weixin_30247307的博客
08-12 389
在浏览器中改变地址栏url，将会触发页面资源的重新加载，这使得我们可以在不同的页面间进行跳转，得以浏览不同的内容。但随着单页应用的增多，越来越多的网站采用ajax来加载资源。因为异步加载的特性，地址栏上的资源路径没有被改变，随之而来的问题就是页面的状态无法被保存。这导致我们难以通过熟悉的方式（点击浏览器前进/后退按钮），在前后的页面状态间进行切换。 为了解决ajax页面状态不能返回的问...
hash模式 和 history模式
07-28
回答: Hash模式和History模式是前端路由中两种常见的模式。Hash模式在URL中带有#号，而History模式则没有。\[1\]\[2\]Hash模式只能更改哈希值，即#后面的内容，而History模式可以通过API设置任意的同源URL。\[1\]...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值