hash和history的区别 vue路由跳转

176 阅读1分钟

hash

  1. 原理:监听onhashchange事件。
  2. 当url发生变化时,浏览器会记录下来,因此前进后退按钮可以使用,应为hash只是修改#后面的内容,所以在改变视图的同时并不会发生请求。 3.缺点:看起来比较丑,并且如果传比较复杂的数据会有体积上面的限制。 4.能够兼容到ie8。

history

1.原理:通过监听onpopstate事件,pushState添加一条新的浏览记录,并通过replacestate来替换当前的历史记录。 2.使用history模式,需要后台配置的支持,因为应用是个单页面客户应用,如果后台没有正确的配置,客户在浏览的时候会出现404。 3.缺点:在每次执行前进、后退以及跳转的时候都是去请求服务器,如果服务器没有正确的配置,就会出现404。 4.兼容到ie10。 5.相对于hash模式history更加适用于seo。

额外

  • pushState方法相当于向当前会话的浏览器的历史堆栈添加一个状态。
  • history.pushState(state,title[, url])