树酱希望将前端的乐趣带给大家 本文已收录 github.com/littleTreem… 喜欢就star✨
谈到路由,一般分为前端路由和后端路由两种,后端路由指的当用户通过浏览器切换不同URL时,都会向服务器发起资源请求,服务器通过后端路由匹配之后根据不同URL返回不同页面,而前端路由则将浏览器与服务器交互(页面跳转的URL规则匹配)的任务交给前端来做
目前单页应用(SPA)成为目前前端应用的主流,而大型单页应用的一个大特征是,由前端路由来控制页面的跳转,通过url的切换,在不请求服务器的前提,更新页面视图,这里以vue-router为例分析,前端路由模式主要包括两种:hash模式和history模式
hash模式即是通过 hash 值(类似锚点)的变化,浏览器不用向服务器发起请求,也就无需刷新页面。而浏览器是怎么监听变化的呢?就是通过url中hash 值的变化,此时还好触发 hashchange 事件,通过此事件的触发我们就可以清晰知道hash发生了什么变化
假设你浏览器访问的url地址是 http://127.0.0.1/#/test 那么通过 location.hash 获取的hash值为 #/test
导致路由的变化无非是三种情况:刷新页面、浏览器返回操作、新链接跳转,下面是具体流程图