hash路由和history路由的区别

最新推荐文章于 2024-05-20 16:24:35 发布

爱吃彩虹吐司的安琪拉

最新推荐文章于 2024-05-20 16:24:35 发布

阅读量1.7k

点赞数 1

分类专栏： # html 文章标签：哈希算法前端 javascript html5

本文链接：https://blog.csdn.net/weixin_44264769/article/details/128624335

版权

4 篇文章 0 订阅

订阅专栏

文章对比了hash路由和history路由在实现原理上的差异，hash路由基于#号变化，不需服务器支持，而history路由利用HTML5HistoryAPI，需要客户端和服务端配合，避免404错误。history模式下，页面刷新会请求完整的URL，需服务器配置以指向index.html。

摘要由CSDN通过智能技术生成

一、直观区别

hash路由带#号，history路由不带#号。

hash: 当页面中的 hash 发生变化时，会触发hashChange事件，通过监听hashChange事件进行页面定位，渲染不同的内容;

history: 利用HTML5 History API 提供的 history.pushState方法或者 history.replaceState 方法，监听popstate事件，需要客户端和服务端共同的支持。

	点击页面导航	强制刷新页面
hash模式	浏览器不向服务端发送请求，匹配路由规则，进行组件切换。	向服务端重新请求（请求地址为 /#/ 之前内容，例：http://localhost:8080/demo/#/index => http://localhost:8080/demo），服务端仍然会返回同一个html，一般为 index.html，此文件再下载引入的 js、css 等文件，接着根据 hash 值匹配路由，因为 hash 值没有变化，所以刷新前后的页面内容是一致的。
history模式	浏览器不向服务端发送请求，利用 h5 的 history API进行导航。	向服务端重新请求（请求地址为地址栏全部内容，例：http://localhost:8080/demo/index => http://localhost:8080/demo/index），此时如果不重写配置内容（后端做保底映射，将请求拦截到index.html上），服务器匹配不到资源会返回404。若服务器配置正确，则返回index.html，再引入js、css 等文件，接着根据地址栏中的地址，去匹配对应的组件进行渲染，此时刷新前后的页面内容是一致的。

点击页面导航

强制刷新页面

hash模式

浏览器不向服务端发送请求，匹配路由规则，进行组件切换。

向服务端重新请求（请求地址为 /#/ 之前内容，例：http://localhost:8080/demo/#/index => http://localhost:8080/demo），

服务端仍然会返回同一个html，一般为 index.html，此文件再下载引入的 js、css 等文件，接着根据 hash 值匹配路由，因为 hash 值没有变化，所以刷新前后的页面内容是一致的。

history模式

浏览器不向服务端发送请求，利用 h5 的 history API进行导航。

向服务端重新请求（请求地址为地址栏全部内容，例：http://localhost:8080/demo/index => http://localhost:8080/demo/index），

此时如果不重写配置内容（后端做保底映射，将请求拦截到index.html上），服务器匹配不到资源会返回404。

若服务器配置正确，则返回index.html，再引入js、css 等文件，接着根据地址栏中的地址，去匹配对应的组件进行渲染，此时刷新前后的页面内容是一致的。