前端路由那些事

树酱希望将前端的乐趣带给大家 本文已收录 github.com/littleTreem… 喜欢就star✨

谈到路由，一般分为前端路由和后端路由两种，后端路由指的当用户通过浏览器切换不同URL时，都会向服务器发起资源请求，服务器通过后端路由匹配之后根据不同URL返回不同页面，而前端路由则将浏览器与服务器交互(页面跳转的URL规则匹配)的任务交给前端来做

1.前端路由模式

目前单页应用（SPA）成为目前前端应用的主流，而大型单页应用的一个大特征是，由前端路由来控制页面的跳转，通过url的切换，在不请求服务器的前提，更新页面视图，这里以vue-router为例分析，前端路由模式主要包括两种：hash模式和history模式

1.1 hash 模式

hash模式即是通过 hash 值（类似锚点）的变化，浏览器不用向服务器发起请求，也就无需刷新页面。而浏览器是怎么监听变化的呢？就是通过url中hash 值的变化，此时还好触发 hashchange 事件，通过此事件的触发我们就可以清晰知道hash发生了什么变化

假设你浏览器访问的url地址是 http://127.0.0.1/#/test 那么通过 location.hash 获取的hash值为 #/test

导致路由的变化无非是三种情况：刷新页面、浏览器返回操作、新链接跳转，下面是具体流程图