淺析前端路由簡(jiǎn)介以及vue-router實(shí)現(xiàn)原理
路由這個(gè)概念最先是后端出現(xiàn)的。在以前用模板引擎開發(fā)頁(yè)面時(shí),經(jīng)常會(huì)看到這樣
大致流程可以看成這樣:
- 瀏覽器發(fā)出請(qǐng)求
- 服務(wù)器監(jiān)聽到80端口(或443)有請(qǐng)求過(guò)來(lái),并解析url路徑
- 根據(jù)服務(wù)器的路由配置,返回相應(yīng)信息(可以是 html 字串,也可以是 json 數(shù)據(jù),圖片等)
- 瀏覽器根據(jù)數(shù)據(jù)包的 Content-Type 來(lái)決定如何解析數(shù)據(jù)
簡(jiǎn)單來(lái)說(shuō)路由就是用來(lái)跟后端服務(wù)器進(jìn)行交互的一種方式,通過(guò)不同的路徑,來(lái)請(qǐng)求不同的資源,請(qǐng)求不同的頁(yè)面是路由的其中一種功能。
前端路由
1. hash 模式
隨著 ajax 的流行,異步數(shù)據(jù)請(qǐng)求交互運(yùn)行在不刷新瀏覽器的情況下進(jìn)行。而異步交互體驗(yàn)的更高級(jí)版本就是 SPA —— 單頁(yè)應(yīng)用。單頁(yè)應(yīng)用不僅僅是在頁(yè)面交互是無(wú)刷新的,連頁(yè)面跳轉(zhuǎn)都是無(wú)刷新的,為了實(shí)現(xiàn)單頁(yè)應(yīng)用,所以就有了前端路由。 類似于服務(wù)端路由,前端路由實(shí)現(xiàn)起來(lái)其實(shí)也很簡(jiǎn)單,就是匹配不同的 url 路徑,進(jìn)行解析,然后動(dòng)態(tài)的渲染出區(qū)域 html 內(nèi)容。但是這樣存在一個(gè)問題,就是 url 每次變化的時(shí)候,都會(huì)造成頁(yè)面的刷新。那解決問題的思路便是在改變 url 的情況下,保證頁(yè)面的不刷新。在 2014 年之前,大家是通過(guò) hash 來(lái)實(shí)現(xiàn)路由,url hash 就是類似于:
這種 #。后面 hash 值的變化,并不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求,瀏覽器不發(fā)出請(qǐng)求,也就不會(huì)刷新頁(yè)面。另外每次 hash 值的變化,還會(huì)觸發(fā) hashchange 這個(gè)事件,通過(guò)這個(gè)事件我們就可以知道 hash 值發(fā)生了哪些變化。然后我們便可以監(jiān)聽 hashchange 來(lái)實(shí)現(xiàn)更新頁(yè)面部分內(nèi)容的操作:
function matchAndUpdate () { // todo 匹配 hash 做 dom 更新操作 } window.addEventListener('hashchange', matchAndUpdate)
2. history 模式
14年后,因?yàn)镠TML5標(biāo)準(zhǔn)發(fā)布。多了兩個(gè) API, pushState 和 replaceState ,通過(guò)這兩個(gè) API 可以改變 url 地址且不會(huì)發(fā)送請(qǐng)求。同時(shí)還有 popstate 事件。通過(guò)這些就能用另一種方式來(lái)實(shí)現(xiàn)前端路由了,但原理都是跟 hash 實(shí)現(xiàn)相同的。用了 HTML5 的實(shí)現(xiàn),單頁(yè)路由的 url 就不會(huì)多出一個(gè)#,變得更加美觀。但因?yàn)闆]有 # 號(hào),所以當(dāng)用戶刷新頁(yè)面之類的操作時(shí),瀏覽器還是會(huì)給服務(wù)器發(fā)送請(qǐng)求。為了避免出現(xiàn)這種情況,所以這個(gè)實(shí)現(xiàn)需要服務(wù)器的支持,需要把所有路由都重定向到根頁(yè)面。
function matchAndUpdate () { // todo 匹配路徑 做 dom 更新操作 } window.addEventListener('popstate', matchAndUpdate)
Vue router 實(shí)現(xiàn)
我們來(lái)看一下 vue-router 是如何定義的:
import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', routes: [...] }) new Vue({ router ... })
可以看出來(lái) vue-router 是通過(guò) Vue.use 的方法被注入進(jìn) Vue 實(shí)例中,在使用的時(shí)候我們需要全局用到 vue-router 的 router-view 和 router-link 組件,以及 this.$router/$route 這樣的實(shí)例對(duì)象。那么是如何實(shí)現(xiàn)這些操作的呢?下面我會(huì)分幾個(gè)章節(jié)詳細(xì)的帶你進(jìn)入 vue-router 的世界。(閱讀源碼是有點(diǎn)枯燥,但是帶著問題去了解,就感覺很有意思。如果你對(duì) vue-router 的實(shí)現(xiàn)機(jī)制也存在一些疑問,可以一起探討交流)
vue-router 實(shí)現(xiàn) -- install
vue-router 實(shí)現(xiàn) -- new VueRouter(options)
vue-router 實(shí)現(xiàn) -- HashHistory
總結(jié)
以上所述是小編給大家介紹的前端路由簡(jiǎn)介以及vue-router實(shí)現(xiàn)原理,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
electron?vue?模仿qq登錄界面功能實(shí)現(xiàn)
這篇文章主要介紹了electron?vue?模仿qq登錄界面,首先使用vuecli創(chuàng)建vue項(xiàng)目,安裝electron,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08vue3通過(guò)canvas實(shí)現(xiàn)圖片圈選功能
這篇文章將給大家詳細(xì)介紹了vue3如何通過(guò)canvas實(shí)現(xiàn)圖片圈選功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴快來(lái)跟隨小編一起學(xué)習(xí)一下吧2023-12-12Vue-resource攔截器判斷token失效跳轉(zhuǎn)的實(shí)例
下面小編就為大家?guī)?lái)一篇Vue-resource攔截器判斷token失效跳轉(zhuǎn)的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10Vue全局注冊(cè)與局部注冊(cè)兩種組件注冊(cè)的方式
本文主要介紹了Vue全局注冊(cè)與局部注冊(cè)兩種組件注冊(cè)的方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue如何設(shè)置定時(shí)器和清理定時(shí)器
這篇文章主要介紹了vue如何設(shè)置定時(shí)器和清理定時(shí)器,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05