hash和history的区别

一 hash和history的介绍

vue-router 默认为 hash 形式，运用 URL 的hash 来模拟一个完好的 URL，当 URL 改动时，页面不会从头加载；# 就是hash符号，中文名为哈希符或许锚点，在hash符号后的值称为hash 值。

路由的hash 形式是利用了window 能够监听 onhashchange 事情来完成的，也就是说hash值是用来辅导浏览器动作的，对服务器没有影响，HTTP恳求中也不会包含hash 值，同时每一次改动hash 值，都会在浏览器的拜访前史中添加一个记载，运用“后退”按钮，就能够回到上一个位置。所以，hash 形式是依据hash值来发生改动，依据不同的值，渲染指定DOM位置的不同数据。

history 是路由的另一种形式，在相应的router 装备时将mode设置为history 即可。

history 形式是经过调用window.history对象上的一系列办法来完成页面的无改写跳转。

利用了HTML5 History Interface 中新增的 pushState() 和replaceState() 办法。

这两个办法运用于浏览器的前史记载栈，在当时已有的back、forward、go的根底之上，它们供给了对前史记载进行修正的功用。只是当它们履行修正时，尽管改动了当时的 URL，但浏览器不会向后端发送恳求。

二  区别

在最明显的显示上：hash模式的URL中会夹杂着#号，而history没有。

· Vue底层对它们的实现方式不同:

hash模式是依靠onhashchange事件(监听location.hash的改变)

history模式是主要是依靠pushState()  replaceState()

pushState()：可以创建新的历史记录

replaceState()：只能修改当前历史记录

当真正需要通过URL向后端发送HTTP请求的时候，比如我们前端请求的url更改造成页面刷新时 在history模式下如果前端请求的url跟后端不匹配时会产生一个错误。