浅谈URL中hash模式与history模式的区别
2022-08-17 本文已影响0人
小豆soybean
转原文链接：https://blog.51cto.com/u_15127544/2699725
本次从浏览器底层来讨论hash和history两种路由模式的区别，首先介绍一下这两种路由模式：
1.hash——即地址栏URL中的#符号（此hash不是密码学里的散列运算）。比如在 http://localhost:8080/#/donate 中，hash的值就是#/donate,我们在浏览器中可以通过BOM中的变量获取到
image.png
图中可以通过window.location.hash来获取当前URL的hash值。
2.history——history模式即是通过在host之后，直接添加斜线和路径来请求后端的一种URL模式。我们把demo中的vue-router调整到了history模式，获取window.location如下图：
image.png
图中pathname变量为/donate，而hash值为空。
上面简要介绍了一下hash和history模式，下面来着重讲解一下这两者的区别：
1.是否向后端传参：
在hash模式中，我们刷新一下上面的网页，可以看到请求的URL为http://localhost:8080/，没有带上#/donate，说明在hash模式下，#后面的内容是不会包含在请求中的，只是会被前端浏览器利用：
image.png
在history模式中，刷新一下网页，明显可以看到请求url为完整的url，url完整地请求了后端：
image.png
2.是否刷新页面
调整到hash模式，在页面中通过 window.location.hash = '#/trans' 做了一个hash的跳转，我们可以看到浏览器的Network中没有进行新的请求，也就是说修改了hash参数，前端浏览器不会重新请求后端，只是会对前端自己的路由生效。
在history模式中，页面中通过 window.location.pathname = '/trans' 做一个路由跳转。可以看到，在对pathname重新赋值后，页面产生了新的请求trans。说明在history模式下，通过修改pathname直接修改路由，浏览器是会重新产生一个新的请求的。
image.png
