1.vue-router是什么?
它是一個(gè)vue.js下的路由組件扇救。
2.路由是什么刑枝?
router,即“路由”迅腔。路由是一個(gè)網(wǎng)絡(luò)工程里面的術(shù)語装畅。James F.Kurose,Keith W.Ross著.陳鳴譯.《計(jì)算機(jī)網(wǎng)絡(luò)》中有講到
路由(routing)是指分組從源到目的地時(shí),決定端到端路徑的網(wǎng)絡(luò)范圍的進(jìn)程
在WEB開發(fā)的世界里面沧烈,路由其實(shí)指的就是控制我們?cè)跒g覽器中輸入的URL應(yīng)該走入哪個(gè)頁面中的一個(gè)組件掠兄。
3.為什么需要路由?
在最原始的ASP锌雀,以及傳統(tǒng)的 開發(fā)中蚂夕,我們?cè)跒g覽器路徑中輸入U(xiǎn)RL,位于服務(wù)器上的WEB服務(wù)器程序(比如說Apache httpd)則會(huì)自動(dòng)更加這URL腋逆,找到WEB目錄下對(duì)應(yīng)的文件婿牍,通過一些解析器將服務(wù)端腳本執(zhí)行之后返回的HTML內(nèi)容發(fā)回給瀏覽器,瀏覽器將收到的HTML渲染出來惩歉。這時(shí)WEB服務(wù)器程序(比如說Apache httpd)自己就完成了這個(gè)路由功能等脂。
比如說wordpress的后臺(tái)就是
http://www.changwei.me/wp-admin/post-new.php
直接請(qǐng)求對(duì)應(yīng)的php腳本,該腳本執(zhí)行之后返回HTML給瀏覽器渲染撑蚌。
但是現(xiàn)在越來越流行框架開發(fā)了上遥,很多PHP項(xiàng)目都是用框架開發(fā)的,框架都遵循單一入口原則争涌,也就是在WEB目錄下只有一個(gè)index.php文件和一些靜態(tài)資源文件粉楚,其他所有業(yè)務(wù)邏輯以及框架本身的代碼都寫在WEB目錄外面的各種文件中,所有入站請(qǐng)求都到達(dá)入口文件第煮,入口文件再通過請(qǐng)求的各種參數(shù)來判斷應(yīng)該是將請(qǐng)求分發(fā)給WEB目錄外的哪個(gè)文件(控制器)執(zhí)行解幼。我們?nèi)绻行夷軌蛘业揭恍┦褂梅浅@系腜HP框架開發(fā)的網(wǎng)站抑党,觀察他們的站內(nèi)連接,各種URL上面有可能會(huì)像這種樣子
http://xxx.com/index.php?module=home&controller=passport&action=login
等等撵摆,這就是該框架通過入口文件接受module底靠,controller,action等參數(shù)來判斷究竟應(yīng)該把該請(qǐng)求分發(fā)給哪個(gè)模塊特铝,哪個(gè)控制器暑中,哪個(gè)操作去處理。這樣就可以十分神奇的實(shí)現(xiàn)只有一個(gè)文件就處理千千萬萬邏輯的方法鲫剿。
到了現(xiàn)在WEB2.0時(shí)代鳄逾,信息分享是很多用戶上網(wǎng)的主要操作,如果你的URL足夠簡短美觀灵莲,那么用戶只需要簡單的輸入U(xiǎn)RL就可以訪問對(duì)應(yīng)的網(wǎng)頁雕凹,而不用輸入一堆module,controller政冻,action之類的非IT行業(yè)的用戶看起來不明不白的單詞枚抵。同時(shí)也為了SEO(搜索引擎優(yōu)化)和URL美觀,因此路由便誕生了明场。
路由可以進(jìn)一步將類似于
http://xxx.com/index.php?module=home&controller=passport&action=login
這樣的URL簡寫成
http://xxx.com/login
這樣看起來是不是美觀了很多汽摹。
4.Apache自帶URL重寫可以達(dá)到上述目的,為什么還需要路由苦锨?
?
如果你會(huì)問出這個(gè)問題逼泣,你一定還沒有體驗(yàn)過PHP的Laravel框架。
我們看一看Laravel在輸出hello world的時(shí)候舟舒,用xphrof做性能測(cè)試的結(jié)果拉庶,發(fā)現(xiàn)路由相關(guān)的操作占據(jù)了大量執(zhí)行時(shí)間,從中也可以側(cè)面看出Laravel中路由的功能強(qiáng)大魏蔗。
前面說了這么多砍的,還是沒講到路由究竟好在哪?為什么不用各種WEB服務(wù)器自帶的URL重寫功能莺治?
首先URL重寫只是單純的正則表達(dá)式匹配請(qǐng)求URL廓鞠,然后將請(qǐng)求轉(zhuǎn)發(fā)到真正的URL路徑上執(zhí)行,這里從高內(nèi)聚低耦合的角度來看谣旁,URL重寫將一個(gè)WEB程序的業(yè)務(wù)邏輯分散到了WEB服務(wù)器程序和WEB程序兩個(gè)地方床佳。并且我們從Apache服務(wù)器程序換到nginx上還需要修改配置文件,移植性降低了榄审。另外我們有的時(shí)候需要對(duì)一組URL進(jìn)行一些特殊的操作砌们,比如說所有后臺(tái)操作請(qǐng)求都必須驗(yàn)證登錄操作,在傳統(tǒng)的開發(fā)中,要么在每一個(gè)后臺(tái)操作的腳本(控制器)中寫一個(gè)驗(yàn)證操作浪感,更加高級(jí)一點(diǎn)的會(huì)include一個(gè)驗(yàn)證腳本昔头,但是怎么看還是不夠優(yōu)雅。現(xiàn)在有路由了影兽,可以將一組和后臺(tái)操作有關(guān)的URL都劃分到一個(gè)分組中揭斧,然后綁定中間件(和java中的過濾器,攔截器很像)
5.vue-router在前端開發(fā)中能帶來什么好處峻堰?
前面講了這么多關(guān)于路由的好處讹开,其實(shí)都指的是后端路由。也就是前后端不分離的項(xiàng)目中的路由【杳現(xiàn)在我們是前后端分離項(xiàng)目中旦万,路由有什么用,能帶來什么好處呢镶蹋?
我們先看看知乎客戶端
??這是知乎客戶端的兩個(gè)頁面成艘。
我們先來看看這個(gè)需求:
有一天產(chǎn)品經(jīng)理說需要開發(fā)一個(gè)像知乎一樣的SPA,要求底部有一些按鈕固定不動(dòng)的底部導(dǎo)航欄梅忌,頂部也有一個(gè)帶有返回按鈕的導(dǎo)航欄固定不動(dòng)狰腌,點(diǎn)擊底部導(dǎo)航欄之后除破,中間部分的頁面應(yīng)該跳轉(zhuǎn)到對(duì)應(yīng)功能頁面牧氮,點(diǎn)擊頂部的返回按鈕之后,應(yīng)該返回到之前的頁面瑰枫。
如果是傳統(tǒng)開發(fā)踱葛,你肯定第一想到的是使用css的display進(jìn)行切換顯示不同的vue組件(components)實(shí)現(xiàn)。
但是我們看到知乎底部的“我的”按鈕存在一個(gè)邏輯光坝,如果用戶沒有登錄尸诽,那么他會(huì)跳轉(zhuǎn)到登錄頁面,如果已經(jīng)登錄則顯示對(duì)應(yīng)頁面盯另。如果使用傳統(tǒng)開發(fā)性含,那么就會(huì)顯得很不優(yōu)雅。
另外還要考慮一個(gè)情況鸳惯,就是一般訪問SPA的用戶都是移動(dòng)端商蕴,移動(dòng)端最需要考慮的就是加載速度,并且不能耗費(fèi)用戶過多流量芝发。那么就需要讓用戶點(diǎn)擊這個(gè)按鈕之后再加載這個(gè)組件的相關(guān)代碼绪商,以及該組件需要請(qǐng)求的數(shù)據(jù),最后在渲染頁面辅鲸。
最后就是URL要美觀漂亮格郁,并且URL可以動(dòng)態(tài)接受參數(shù),比如說網(wǎng)易云音樂這個(gè)非常典型的SPA項(xiàng)目便使用了后端路由并且可以接受參數(shù)
http://music.163.com/#/my/m/music/playlist?id=121597667
要滿足這些需求的話,在vue.js下使用vue-router是最合適不過的了例书。
6.vue-router都提供了什么锣尉?
1.前端路由(編程式導(dǎo)航 · GitBook):讓頁面中的部分內(nèi)容可以無刷新的跳轉(zhuǎn),就像原生APP一樣决采。
2.懶加載(懶加載 · GitBook):結(jié)合異步組件以及在組建的created鉤子上觸發(fā)獲取數(shù)據(jù)的ajax請(qǐng)求(數(shù)據(jù)獲取 · GitBook)可以最大化的降低加載時(shí)間悟耘,減少流量消耗。
3.重定向(重定向 和 別名 · GitBook):可以實(shí)現(xiàn)某些需要根據(jù)特定邏輯改變頁面原本路由的需求织狐,比如說未登錄狀態(tài)下訪問“個(gè)人信息”時(shí)應(yīng)該重定向到登錄頁面暂幼。
4.美化URL(HTML5 History 模式):還記得前面網(wǎng)易云音樂的URL嗎?
http://music.163.com/#/my/m/music/playlist?id=121597667
網(wǎng)易云音樂網(wǎng)頁版的URL里面幾乎都帶有一個(gè)#號(hào)移迫,大家可能會(huì)疑惑旺嬉,#號(hào)是URL的hash部分,并不會(huì)傳遞到服務(wù)端厨埋,那么#號(hào)起什么作用呢邪媳?其實(shí)前端路由器就是通過URL的hash部分來像傳統(tǒng)的后端路由器一樣判斷某些請(qǐng)求需要交給哪個(gè)前端組件處理。
但是大家都會(huì)覺得URL里面帶一個(gè)#號(hào)太丑了荡陷,要是能像傳統(tǒng)WEB應(yīng)用一樣的URL多好雨效。這個(gè)時(shí)候vue-router提供的“HTML5 History 模式”就“完美”解決了這個(gè)問題。
為什么前面的完美要加上引號(hào)呢废赞?
請(qǐng)參考官方文檔:
不過這種模式要玩好徽龟,還需要后臺(tái)配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁客戶端應(yīng)用唉地,如果后臺(tái)沒有正確的配置据悔,當(dāng)用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會(huì)返回 404,這就不好看了耘沼。
所以呢极颓,你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態(tài)資源,則應(yīng)該返回同一個(gè)index.html 頁面群嗤,這個(gè)頁面就是你 app 依賴的頁面菠隆。
這里還要引出另一個(gè)話題,就是為什么前端路由的時(shí)候需要改變URL呢狂秘?前面提到了WEB2.0時(shí)代是一個(gè)信息分享的時(shí)代骇径,如果用戶切換到了另一個(gè)頁面,但是URL仍然顯示的是index.html赃绊,那么用戶想要分享這個(gè)頁面給他的朋友既峡,他的朋友訪問到的則只是這個(gè)SPA的首頁,并不是這個(gè)分享的用戶本身希望他朋友看到的頁面碧查。因此前端路由在改變頁面的時(shí)候必須讓URL跟著一起變运敢。這樣同時(shí)也近似完美地解決了歷史上ajax導(dǎo)致瀏覽器返回前進(jìn)按鈕失效的問題校仑。
5.前置操作,中間件传惠,過濾器迄沫,攔截器(導(dǎo)航鉤子 · GitBook)
在后端路由中都有前置操作,中間件卦方,過濾器羊瘩,攔截器等概念。前端路由也可以有的盼砍,vue-router本身較為完美的支持了這些功能尘吗,讓你做前端SPA開發(fā)就像后端開發(fā)一樣。在第三點(diǎn)提到的用戶未登錄重定向的判斷邏輯就可以寫在這里浇坐。
6.路由元信息(路由元信息 · GitBook):后端路由中可以對(duì)路由規(guī)則進(jìn)行分組睬捶,比如說把所有需要登錄才能訪問的頁面劃分為一組。vue-router并沒有路由規(guī)則分組功能近刘,但是它提供了路由元信息擒贸,可以在元信息中定義一些規(guī)則,在路由鉤子中再去判斷這些規(guī)則觉渴,進(jìn)行相應(yīng)的操作介劫。
7.滾動(dòng)位置控制(滾動(dòng)行為 · GitBook):相對(duì)于官方翻譯的滾動(dòng)行為,我更喜歡自己將他翻譯為“滾動(dòng)位置控制”案淋,官方文檔對(duì)于它的作用已經(jīng)講的比較通俗易懂了座韵,大家可以參閱官方文檔學(xué)習(xí)。