路由用于设定访问路径,并将路径和组件映射起来。在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。