回顾&学习记录（2）— Vue-router中的hash路由和history路由

路由用于设定访问路径，并将路径和组件映射起来。在vue-router的SPA（单页应用中），是路径之间的切换，也是组件之间的切换。vue中默认使用hash

1、hash路由

简单理解：url带#号

原理：hash指的是#号后面的字符，切换路由（也就是hash值变化）不会向后端发起请求；每次hash值发生改变时，会触发hashchange事件，通过监听hashchange事件，实现前端路由

hash值改变->触发hashchange事件监听hash值->通过路由表来判断加载对应的路由->路径和组件的映射来加载对应的组件->切换不同组件进行渲染

window.onhashchange事件监听hash值变化

window.history是hash值的改变的记录

注：和css中的#一样，hash也被称为锚点，代表网页中的一个位置，只是滚到网页中相应的位置，也就是页面定位，不会重新加载网页

hash路由中只能修改同文档的url 

2、history路由

简单理解：url不带#号

原理：使用pushState()和replaceState()来实现前端路由，通过这两个方法改变url，页面不会重新刷新。 使用这两个方法更改url后，会触发popstate事件，监听popstate事件，实现前端路由。

history修改的url可以是同域的任意url

在生产环境中，history 模式当手动刷新时，会报404，需要后台正确配置。

区别：

有三个页面的导航为test1、test2、test3

此时页面已进入url: http:localhost:8080/test1(或者是hash模式下：http:localhost:8080/#/test1)

切换导航页面，例如从test1到test2

http:localhost:8080/#/test1到http:localhost:8080/#/test2

http:localhost:8080/test1到http:localhost:8080/test2

hash模式： 地址栏中的 hash 发生改变时，浏览器不会向服务端发送请求，所以会匹配路由规则，进而进行组件切换

history模式：地址栏发生变化后，会利用 h5 的 history API进行导航，浏览器也不会向服务器发送请求。

注：

当页面本就在一个地址下时（例如：http:localhost:8080/#/test1或者http:localhost:8080/test1），进行手动刷新或者地址栏回车，则会向服务器发起请求。

hash模式：只将#前面的部分（http:localhost:8080/）当作地址向服务器发起请求，服务端会返回index.html(默认配置)

history模式：会将地址栏中的全部地址（http:localhost:8080/test1）当前请求地址向服务器发起请求，如果服务器没有单独正确配置，则会返回404。