hash 模式与 history 模式小记

Posted 2022-09-20 yaokai729

hash 模式

　　这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 "www.baidu.com/#hashhash" ，其中 "#hashhash" 就是我们期望的 hash 值。

　　由于 hash 值的变化不会导致浏览器像服务器发送请求，而且 hash 的改变会触发 hashchange 事件，浏览器的前进后退也能对其进行控制，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。

history 模式

　　利用了 html5 History 中新增的 pushState() 和 replaceState() 方法，这两个方法可以添加和修改历史记录条。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向服务器发送请求。

　　history.pushState() 和 history.replaceState() 均接收三个参数（state, title, url）

　　参数说明如下：

1. 1. state：合法的 javascript 对象，可以用在 popstate 事件中

   2. title：现在大多浏览器忽略这个参数，可以直接用 null 代替

   3. url：任意有效的 URL，用于更新浏览器的地址栏

　　history.pushState() 和 history.replaceState() 的区别在于：

• • history.pushState() 在保留现有历史记录的同时，将 url 加入到历史记录中。

  • history.replaceState() 会将历史记录中的当前页面历史替换为 url。

　　由于 history.pushState() 和 history.replaceState() 可以改变 url 同时，不会刷新页面，所以在 HTML5 中的 histroy 具备了实现前端路由的能力。

　　但需要注意的是，history 在修改 url 后，虽然页面并不会刷新，但我们在手动刷新，或通过 url 直接进入应用的时候， 服务端是无法识别这个 url 的。因为我们是单页应用，只有一个 html 文件，服务端在处理其他路径的 url 的时候，就会出现404的情况。 所以，如果要应用 history 模式，需要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回单页应用的 html 文件。

总结

• hash 模式下，url中会携带一个 hash 符号#，仅 hash 符号之前的内容会被包含在请求中，因此不会返回 404 错误。

• history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，需要服务器对路由进行配置，否则将返回 404 错误。