URL的hash模式和history模式的区别

hash模式

例子：http://www.example.com/index.html#location1

  1. #是一个位置标识符，利用a标签的herf属性可以进行页面内位置的跳转。
  2. http请求不会发送#后面的字符串到服务器，如果要发送，要将#转码为%23。
  3. 改变#不会触发网页的重载，但是会增加浏览器的历史访问记录，但ie6/7不存在这个规则。
  4. 可以通过window.location.hash读取内容，但要对字符串进行分段处理。
  5. 可以绑定hashchange事件。
  6. 通过window.location来处理url

history模式

例子：http://www.example.com/index

  • 通过window.history来处理url
  • history在H5之前有go(),back(),forword()三个API，后来增加pushState(),replaceState()两个API
  • history.go(1) = history.forword()
  • history.go(-1) = history.back()

history.pushState(state, title, url)
history.pushState()只会改变当前地址栏的路径，并不会更新页面内容，但会改变浏览历史记录。

  • state:状态对象
  • title:忽略，填null
  • url：要跳转的地址

history.replaceState(state, title, url)
history.replaceState()就是把当前的历史记录改成目标路径，不会进行页面跳转和刷新，也不会增加浏览历史记录，但是如果按F5刷新，他会跳转到目标页面。

  • state:状态对象
  • title:忽略，填null
  • url：要跳转的地址

history.pushState跳转的可以用go()来前进后退，history.replaceState()没有浏览记录，不能用前进后退

window.onpopstate事件 监听如下操作

  • 点击浏览器的前进按钮/后退按钮
  • 执行js代码:history.go(n) / history.forward()
  • 注意：pushstate()和replacestate()不会触发popstate事件

区别

  • hash兼容到IE8,history兼容到IE10。
  • hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。
  • hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。