hash和history两种模式的区别

最新推荐文章于 2024-09-04 17:28:36 发布
原创 最新推荐文章于 2024-09-04 17:28:36 发布 · 312 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#哈希算法 #前端 #算法

  • hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#，外观上比 hash 模式好看些
  • hash 能兼容到IE8， history 只能兼容到 IE10
  • 虽然hash路径出现在URL中，但是hash值变化不会导致浏览器向服务器发送请求，对后端完全没有影响，因此改变hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的，hash改变会触发hashchange事件（hashchange只能改变 # 后面的url片段）；history模式URL就要和后端进行一致，所以要改为history也需要后端的配合，否则会报错，所以hash模式在每次刷新页面时是直接更改“#”后的东西，history每次刷新会重新像后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错404！(最好在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面)。history的好处是可以进行修改历史记录，并且不会立刻像后端发起请求。
  • hash原理是通过监听浏览器的onhashchange()事件变化，查找对应的路由规则；history原理是利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化
Ideaing~
关注
前端路由手写Hash和History两种模式
贫僧法号依平
07-15 1075
文章目录1. Hash模式：简洁而广泛适用2. History模式：更自然的用户体验3. 结论 在现代Web开发中，单页面应用（Single Page Application，简称SPA）因其流畅的用户体验和高效的页面交互能力而备受青睐。前端路由作为SPA的核心技术之一，允许用户在不刷新整个页面的情况下，通过URL的变化来加载和切换不同的页面内容。本文将通过手写代码的方式，深入探讨前端路由的两种主流实现方式：Hash模式和History模式。 1. Hash模式：简洁而广泛适用 Hash模式利用URL的哈
Vue-router 中hash模式和history模式的区别
12-10
Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:”hash”;   mode:”history”;  hash模式和history模式的不同 对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 为了达到这一目的，浏览器当前提供了以下两种支持： hash —— 即地址栏 URL 中的
hash路由和history路由的区别
热门推荐
weixin_62930485的博客
03-14 1万+
单页应用是在移动互联时代诞生的，它的目标是不刷新浏览器，而通过感知地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。 不同之处有三点。 一是原理不同。hash模式的实现原理是通过监听hashChange事件来实现的。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录，并更换地
Hash模式和History模式的区别
10-19 597
首先强调一下 不管哪种模式，都是客户端路由的实现方式。 也就是当路径发生变化的时候，不会向服务器发生请求，是由JS监视路径的变化，然后根据不同的地址，渲染不同的内容；如果需要服务器内容的话，会发送 ajax 请求来获取。 表现形式的区别 Hash 模式路由中带着 # 号，# 后边的内容作为我们的路由地址，可以通过问号携带 URL 参数。 官方文档上说这种模式很丑，路径中带着一些跟路径无关的符号，比如 # 号和 ? 号 再来看 History 模式 History 模式的 URL 就是一个正常的 URL ，
Hash模式与History模式的区别
cyz_hd的博客
08-09 756
对于单页面应用，服务器端只保存了首页的html资源，如果服务器没有相应的配置，以这样的地址去访问服务器，是找不到资源的；意思是试着去加载所请求的路径在服务器上对应的资源，如果找不到，就以地址为文件夹，往下找index.html；所以服务器需要进行相应的配置来支持History模式，当服务器找不到所请求的资源时，将首页静态文件返回给客户端，客户端再根据当前路由地址解析页面，实现页面跳转。History模式是基于HTML5中的History API，主要用到pushState()方法和。
vue-router中的hash和history两种模式的区别
10-18
下面详细解释这两种模式的区别。 ### hash模式 hash模式是早期基于浏览器历史记录管理的前端路由模式。它利用了URL中的hash（即URL中的#符号）的变化来改变浏览器历史记录。当页面加载时，hash值不会被包含在HTTP...
hash模式和history模式区别
weixin_42560424的博客
06-06 1399
中的路径部分被用来管理路由，当切换路由时，浏览器会向服务器发送请求，服务器需要正确配置以避免。时，浏览器不会向服务器发送请求，而是通过。，而不会触发页面重新加载。部分被用来模拟一个完整的。
路由的hash和history模式的区别
青春木鱼的博客
08-04 5209
单页应用是在移动互联时代诞生的，它的目标是不刷新整体页面，通过地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。hash模式是通过监听hashChange事件来实现的，history模式是通过pushState方法+popstate事件来实现的。
hash和history的区别
weixin_62226037的博客
11-23 752
hash模式在每次刷新页面时是直接更改“#”后的东西，history每次刷新会重新像后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错。（2）pushState 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；（1）pushState 设置的新 URL 可以是与当前 URL 同源的任意 URL；当真正需要通过URL向后端发送HTTP请求的时候，比如我们前端请求的url更改造成页面刷新时 在history模式下如果前端请求的url跟后端不匹配时会产生报错。
history和hash两种路由模式的不同之处
Niucode的博客
01-19 2055
当使用历史模式的路由时，假设我们有一个单页应用，入口文件为index.html。用户在浏览器中访问https://example.com/about，表示用户想要访问关于页面。 如果没有服务器端配置支持，当用户刷新页面或直接访问https://example.com/about时，服务器会试图寻找对应的about.html文件来响应请求。然而，在单页应用中，并没有独立的about.html文件，所有页面内容都包含在index.html中。 因此，需要在服务器端进行配置以确保在刷新页面或直接访问特定路由时
uniapp打包hash和history两种模式的区别
mashangzhifu的博客
07-02 8980
在uniapp打包成H5时，会有一个路由模式供你选择，有两种分别是：hash和history 这两者的主要区别如下： 1：hash - 地址栏会带# 比如在HbuilderX里启动一个uniapp项目，在地址后面会加一个#然后再加上页面地址，如： http://localhost/#/pages/index/index 它的特点在于：hash虽然出现在URL中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。 2：history - 正常的网址 比如这种：http:/
Html5 history对象详解
qq_36723759的博客
04-15 1646
这个文章记录的是 html5 原生的 history 对象，不是 vue-router 的 history。 作用 history 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。window.history: 返回当前会话的 history 状态。 属性 history.length 只读,返回一个整数，该证书表示会话历史中元素的数目，包括当前加载的页。 history.scrollRestoration 允许 web 应用程序在历史导航上显示的设置默认滚动恢复行为。此属性可以
Hash 模式和 History 模式的区别?
weixin_53818172的博客
07-13 454
Hash 模式和 History 模式是前端路由中常用的两种模式，它们在 URL 的形式和处理方式上存在一些区别。
hash模式和history模式的区别
weixin_45616633的博客
12-14 2326
1、hash模式 什么是hash模式 URL中带有"#"号。 例：http://localhost:8080/#/login hash模式的特点 hash模式下，前端路由修改的是#号中的信息，对后端完全没有影响，因此改变hash也不会重新加载整个页面。如果修改不存在的#abc页面，页面也不会跳转，history模式则刚好相反，没有对应的页面就会出现404。 2、history模式 什么是history模式 URL中没有"#"号。 例:http://localhost:8080/login history模式
彻底讲清楚history和hash的区别
太阳与星辰的博客
09-04 3122
从原理出发来理解路由的hash和history模式
vue路由模式：路由的hash和history模式的区别
单口相声Jay
03-27 1366
hash模式适用于兼容性要求较高的应用，而history模式适用于需要进行SEO优化的应用。
hash和history两种路由模式的区别
最新发布
09-24
Hash 路由模式和 History 路由模式存在多方面区别，具体如下： - **原理不同**：“History”模式利用浏览器的历史记录栈，通过“history.pushState()”或“replaceState()”方法修改 URL，同时监听“popstate”事件来实现页面跳转，这种模式下，URL 可以看起来像标准页面一样，没有“#”号。“Hash”模式则是通过监听“window.onhashchange”事件来检测 URL 中“#”号后的变化，从而实现对页面内容的更新，这种模式下，URL 中会包含“#”号，但“#”号后的部分不会发送到服务器[^2]。 - **兼容性和浏览器要求不同**：“Hash”模式由于使用“#”号，兼容性较高，甚至可以兼容一些老旧的浏览器。“History”模式则使用了 HTML5 的新特性，对浏览器有更高的要求，例如需要 IE10 以上的版本才能使用[^2]。 - **后端配合需求不同**：“History”模式在页面刷新时，如果后端没有正确配置，可能会导致 404 错误。“Hash”模式则不会因为后端配置问题而导致功能失效，因为 hash 不会被包含在 HTTP 请求中，对后端完全没有影响，改变 hash 后刷新也不会有问题[^2][^4]。 - **路由表现不同**：“History”模式的 URL 看起来更传统，没有“#”号，提供更好的用户体验。“Hash”模式的 URL 中包含“#”号，可能会影响 URL 的美观[^2]。 ### 代码示例 以下是简单的 JavaScript 示例，展示两种模式的基本实现： #### Hash 模式 ```javascript // 监听 hash 变化 window.onhashchange = function () { const hash = window.location.hash.slice(1); console.log('当前 hash:', hash); // 根据 hash 进行页面内容更新 }; // 设置 hash window.location.hash = 'page1'; ``` #### History 模式 ```javascript // 监听浏览器前进后退 window.onpopstate = function (event) { console.log('当前 state:', event.state); // 根据 state 进行页面内容更新 }; // 新增历史记录 history.pushState({ page: 'page1' }, 'Page 1', '/page1'); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值