hash和history两种模式的区别

最新推荐文章于 2024-03-27 00:36:30 发布
最新推荐文章于 2024-03-27 00:36:30 发布
阅读量4k 收藏 39
点赞数 5
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49046027/article/details/120074867
版权

前端路由 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
关注
  • 5
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
hash路由模式与history路由模式
麦呢头冷的博客
11-02 8553
1. hash路由模式 hash模式：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号 hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题 hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user 参考: hashChange 2. history模式 history模式： 美化后的hash模式，路...
hash模式和history模式区别
weixin_42560424的博客
06-06 1182
中的路径部分被用来管理路由，当切换路由时，浏览器会向服务器发送请求，服务器需要正确配置以避免。时，浏览器不会向服务器发送请求，而是通过。，而不会触发页面重新加载。部分被用来模拟一个完整的。
Hash 模式和 History 模式的区别?
weixin_53818172的博客
07-13 307
Hash 模式和 History 模式是前端路由中常用的两种模式，它们在 URL 的形式和处理方式上存在一些区别。
vue路由模式：路由的hash和history模式的区别
最新发布
单口相声Jay
03-27 552
hash模式适用于兼容性要求较高的应用，而history模式适用于需要进行SEO优化的应用。
浅谈前端路由原理hash和history
Jack, what else can you do besides holding your little darling?
05-26 1806
浅谈前端路由原理hash和history
history和hash的区别
qq_43278421的博客
09-30 9812
1.hash带#，history没有 2.history相对比较新，只能兼容ie10，hash能兼容ie8 3.跳转的时候hash只能修改#后面的内容，而history只要是同源的就可以 原理： hash：通过监听浏览器的onhashchange（）事件变化，查找对应的路由规则 history：利用H5的history中新增的两个API pushState（）和replaceState（）和一个事件onpopstate监听URL变化 pushState（）和replaceState（）可以用于浏览器的历史记
深入了解前端路由 hash 与 history 差异
油墨香^-^的博客
02-07 495
没了解这两种路由前，不管是vue还是react在项目创建时难免会进行路由之间选择,在hash和history难免会纠结一番,或者是直接稀里糊涂用了默认带的hash路由，看完这篇分享,保准让你之后不会在为选择哪中路由犯难,实现按需选择。有疑问欢迎在评论区指出，大家一起沟通。Vue Router是Vue.js官方的路由插件，它和Vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
vue-router中的hash和history两种模式的区别
10-18
大家都知道vue-router有两种模式，hash模式和history模式，这里来谈谈vue-router中的hash和history两种模式的区别。感兴趣的朋友一起看看吧
Vue-router 中hash模式和history模式的区别
12-10
Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:”hash”;  mode:”history”;  hash模式和history模式的...
区分vue-router的hash和history模式
10-14
Vue Router 是 Vue.js 应用中的官方路由库，它提供了两种模式：hash 和 history，用于管理SPA（单页面应用）的路由。理解这两种模式的区别对于优化用户体验和避免潜在的技术问题至关重要。 **一、hash模式** 在...
Vue学习笔记 之 History 路由 和 Hash 路由的区别 及 History 模式时，Nginx的配置方式
向心行者
07-06 3737
History 模式时，服务器需要进行相应的配置，以确保在刷新页面或直接访问某个子路由时，仍能正确返回前端路由对应的页面。这是因为在 History 模式下，前端的路由和后端的路由是分离的，后端需要将所有路由请求都重定向到前端的入口页面。在 Vue Router 中，Hash 模式是一种简单且常见的路由模式，它使用 URL 中的哈希（#）来管理路由。然后，修改路由配置文件./router/index.js，在该文件我们配置了History 模式，同时还需要配置base路径，保证路由访问时的正确。
hash和history的区别
weixin_62226037的博客
11-23 579
hash模式在每次刷新页面时是直接更改“#”后的东西，history每次刷新会重新像后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错。（2）pushState 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；（1）pushState 设置的新 URL 可以是与当前 URL 同源的任意 URL；当真正需要通过URL向后端发送HTTP请求的时候，比如我们前端请求的url更改造成页面刷新时 在history模式下如果前端请求的url跟后端不匹配时会产生报错。
hash和history路由的区别
发果叁
08-04 2959
在了解路由模式前，我们先看下 什么是单页面应用，vue-router 的实现原理是怎样的，这样更容易理解路由。
hash和history模式
weixin_44922480的博客
06-16 411
当使用hash模式的时候，所有的路由请求不会向服务器获取资源，所以也不会发生404的错误。这是因为在 hash 模式下，URL 中的哈希部分被视为客户端的内部状态，用于前端路由的实现，而不是真正的服务器路由。如果服务器没有正确配置的话，访问某个地址或路由就会报错404，这是因为在history模式下，URL的路径会直接映射到服务器的上的文件路径，服务器需要去解析这个路径并返回对应页面的内容。hash值的变化仅仅是前端路由的变化，并不是页面的请求。，因此路由的切换是在前端完成的，不会引起页面的刷新。
路由-hash和history模式的区别
莫听穿林打叶声，何妨吟啸且徐行。
09-04 464
路由-hash和history模式的区别
了解一下最浅层的vue 路由(router)的使用
weixin_52139966的博客
06-04 167
Vue Router 是 Vue.js 官方的路由管理器，或者说是SPA（单页应用）的路径管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。 实现原理: SPA(single page application):单一页面
Hash与History模式的区别
Sodaxiang的博客
01-22 1304
在react或vue的前端渲染中，通常会使用到hash或者history两种路由模式。 hash路由：锚点操作，通过hash值的变化感知路由的变化，优点是兼容性高，缺点是带有#号不好看，这种路由只需要客户端支持，不需要服务端。 history路由：基于HTML5的history模式，监听URL的变化，需要客户端和服务端共同支持。 1. hash路由 hash是浏览器URL中#后面的内容，包含#。hash是url的锚点，改变#后的内容，浏览器会加载相应位置的内容，不会重新发起请求。 当页面中的has.
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、付费专栏及课程。

余额充值