一、hash
- 含义: 路由的 hash 模式是利用了 window 可以监听 onhashchange 事件来实现的,也就是说 hash 值是用来指导浏览器动作的,对服务器没有影响,HTTP 请求中也不会包括 hash 值,同时每一次改变 hash 值,都会在浏览器的访问历史中增加一个记录,使用“后退”按钮,就可以回到上一个位置。所以,hash 模式 是根据 hash 值来发生改变,根据不同的值,渲染指定DOM位置的不同数据。
- 特点
1、url中带/#/符号
2、可以改变URL,但不会触发页面重新加载(hash的改变会记录在 window.hisotry 中)因此并不算是一次 HTTP 请求,所以这种模式不利于 SEO 优化
3、只能修改 # 后面的部分,因此只能跳转与当前 URL 同文档的 URL
4、只能通过字符串改变 URL
5、通过window.onhashchange 监听 hash 的改变,借此实现无刷新跳转的功能。
6、每改变一次 hash ( window.location.hash),都会在浏览器的访问历史中增加一个记录。
7、路径中从 # 开始,后面的所有路径都叫做路由的 哈希值 并且哈希值它不会作为路径的一部分随着 http 请求,发给服务器
二、 history
- 含义
history是路由的另一种模式,在相应的router配置时将mode设置为history 即可。
history 模式是通过调用 window.history 对象上的一系列方法来实现页面的无刷新跳转。
利用了HTML5 History Interface中新增的pushState() 和 replaceState() 方法。
这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会向后端发送请求。
- 特点
1、新的URL可以是与当前URL同源的任意 URL,也可以与当前URL一样,但是这样会把重复的一次操作记录到栈中。
2、通过参数stateObject可以添加任意类型的数据到记录中。
3、可额外设置title属性供后续使用。
4、通过pushState、replaceState实现无刷新跳转的功能。
5、路径直接拼接在端口号后面,后面的路径也会随着http请求发给服务器,因此前端的URL必须和向发送请求后端URL保持一致,否则会报404错误。
6、由于History API的缘故,低版本浏览器有兼容行问题。