畢業(yè)于西安電子科技大學(xué)<br>現(xiàn)任Adobe專家委員會(huì)委員<br>曾任職于西安電子科技大學(xué)歌豺，任西安美院，交通大學(xué)僧著，西北工業(yè)大學(xué)履因，思源學(xué)院，西京大學(xué)客座講師<br>曾任北京八維計(jì)算機(jī)研修學(xué)院動(dòng)畫學(xué)院院長(zhǎng)<br>曾任北京東方漫林總經(jīng)理<br>曾任北京紅馬傳媒(大麥網(wǎng))前端技術(shù)主管<br>曾任北京競(jìng)技世界有限公司(JJ斗地主)前端主管<br>曾任中彩網(wǎng)前端開發(fā)主管<br>曾任北京超閃軟件技術(shù)總監(jiān)盹愚，游戲制作人<br>精通前端開發(fā)栅迄，桌面應(yīng)用開發(fā)，頁(yè)游開發(fā)杯拐，手機(jī)視頻項(xiàng)目開發(fā)霞篡，手機(jī)H5游戲開發(fā)世蔗，手機(jī)2D游戲開發(fā)，手機(jī)3D開發(fā)朗兵。<br>曾開發(fā)的產(chǎn)品污淋，大麥網(wǎng)在線購(gòu)票系統(tǒng)，永樂票務(wù)購(gòu)票系統(tǒng)余掖，人人網(wǎng)JJ斗地主游戲寸爆，Mirage引擎UI編輯器，骨骼編輯器盐欺，動(dòng)畫編輯器赁豆，粒子編輯器，軒轅劍山和云的彼端online版冗美，傳神3D手游3D版<br>

web前端學(xué)習(xí)交流群：1141251437<br>需要學(xué)習(xí)web前端的小伙伴粉洼，加群节预，一起交流，一起學(xué)習(xí)属韧，可免費(fèi)領(lǐng)取學(xué)習(xí)資料及源碼

公眾號(hào)：經(jīng)典老徐拙泽。自媒體運(yùn)營(yíng)，副業(yè)兼職哲戚，寫作素材奔滑，等各種福利等你來拿。

用最低的價(jià)格秒裕，最快的速度，搭建屬于你個(gè)人的網(wǎng)站钞啸。

WordPress博客技術(shù)，包括代碼修改梭稚，模板颖低，插件，環(huán)境搭建等弧烤。一切WordPress博客相關(guān)文章忱屑，請(qǐng)猛投這里。

1.vue-router是什么？ 它是一個(gè)vue.js下的路由組件急波。 2.路由是什么从铲？ router，即“路由”澄暮。路由是一個(gè)網(wǎng)絡(luò)工程里面的術(shù)語(yǔ)名段。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è)頁(yè)面中的一個(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è)文件就處理千千萬(wàn)萬(wàn)邏輯的方法缓窜。 到了現(xiàn)在WEB2.0時(shí)代定续，信息分享是很多用戶上網(wǎng)的主要操作，如果你的URL足夠簡(jiǎn)短美觀禾锤，那么用戶只需要簡(jiǎn)單的輸入U(xiǎn)RL就可以訪問對(duì)應(yīng)的網(wǎng)頁(yè)私股，而不用輸入一堆module，controller恩掷，action之類的非IT行業(yè)的用戶看起來不明不白的單詞倡鲸。同時(shí)也為了SEO（搜索引擎優(yōu)化）和URL美觀，因此路由便誕生了黄娘。 路由可以進(jìn)一步將類似于 http://xxx.com/index.php?module=home&controller=passport&action=login 這樣的URL簡(jiǎn)寫成 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è)頁(yè)面。 我們先來看看這個(gè)需求： 有一天產(chǎn)品經(jīng)理說需要開發(fā)一個(gè)像知乎一樣的SPA够吩，要求底部有一些按鈕固定不動(dòng)的底部導(dǎo)航欄比然，頂部也有一個(gè)帶有返回按鈕的導(dǎo)航欄固定不動(dòng)，點(diǎn)擊底部導(dǎo)航欄之后周循，中間部分的頁(yè)面應(yīng)該跳轉(zhuǎn)到對(duì)應(yīng)功能頁(yè)面强法，點(diǎn)擊頂部的返回按鈕之后，應(yīng)該返回到之前的頁(yè)面湾笛。 如果是傳統(tǒng)開發(fā)饮怯，你肯定第一想到的是使用css的display進(jìn)行切換顯示不同的vue組件（components）實(shí)現(xiàn)。 但是我們看到知乎底部的“我的”按鈕存在一個(gè)邏輯嚎研，如果用戶沒有登錄蓖墅，那么他會(huì)跳轉(zhuǎn)到登錄頁(yè)面，如果已經(jīng)登錄則顯示對(duì)應(yīng)頁(yè)面嘉赎。如果使用傳統(tǒng)開發(fā)置媳，那么就會(huì)顯得很不優(yōu)雅。 另外還要考慮一個(gè)情況公条，就是一般訪問SPA的用戶都是移動(dòng)端拇囊，移動(dòng)端最需要考慮的就是加載速度，并且不能耗費(fèi)用戶過多流量靶橱。那么就需要讓用戶點(diǎn)擊這個(gè)按鈕之后再加載這個(gè)組件的相關(guān)代碼寥袭，以及該組件需要請(qǐng)求的數(shù)據(jù)，最后在渲染頁(yè)面关霸。 最后就是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）：讓頁(yè)面中的部分內(nèi)容可以無(wú)刷新的跳轉(zhuǎn)，就像原生APP一樣识埋。 2.懶加載（懶加載 · GitBook）：結(jié)合異步組件以及在組建的created鉤子上觸發(fā)獲取數(shù)據(jù)的ajax請(qǐng)求（數(shù)據(jù)獲取 · GitBook）可以最大化的降低加載時(shí)間凡伊，減少流量消耗。 3.重定向（重定向 和 別名 · GitBook）：可以實(shí)現(xiàn)某些需要根據(jù)特定邏輯改變頁(yè)面原本路由的需求窒舟，比如說未登錄狀態(tài)下訪問“個(gè)人信息”時(shí)應(yīng)該重定向到登錄頁(yè)面系忙。 4.美化URL（HTML5 History 模式）：還記得前面網(wǎng)易云音樂的URL嗎？ http://music.163.com/#/my/m/music/playlist?id=121597667 網(wǎng)易云音樂網(wǎng)頁(yè)版的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è)客戶端應(yīng)用疗琉，如果后臺(tái)沒有正確的配置冈欢，當(dāng)用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會(huì)返回 404，這就不好看了盈简。 所以呢凑耻，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè)index.html 頁(yè)面柠贤，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面香浩。 這里還要引出另一個(gè)話題，就是為什么前端路由的時(shí)候需要改變URL呢臼勉？前面提到了WEB2.0時(shí)代是一個(gè)信息分享的時(shí)代邻吭，如果用戶切換到了另一個(gè)頁(yè)面，但是URL仍然顯示的是index.html宴霸，那么用戶想要分享這個(gè)頁(yè)面給他的朋友囱晴，他的朋友訪問到的則只是這個(gè)SPA的首頁(yè)，并不是這個(gè)分享的用戶本身希望他朋友看到的頁(yè)面瓢谢。因此前端路由在改變頁(yè)面的時(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)行分組，比如說把所有需要登錄才能訪問的頁(yè)面劃分為一組皂林。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í)德迹。

wordpress技術(shù)胳搞、主題開發(fā)卸例、插件開發(fā)、最新的wordpress咨詢肌毅，bug筷转、升級(jí)等信息，隨時(shí)隨地歡迎訂閱悬而。

一個(gè)苦逼的程序員

面向JavaScript愛好人員提供：Web前端最新資訊呻袭、原創(chuàng)內(nèi)容、JavaScript腺兴、HTML5左电、Ajax、jQuery、Node.js篓足、Vue.js段誊、React、Angular等一系列教程和經(jīng)驗(yàn)分享栈拖。<br><br>博客首發(fā)：<a href="https://links.jianshu.com/go?to=http%3A%2F%2Fwww.dadaqianduan.cn%2F%23%2F" target="_blank">http://www.dadaqianduan.cn/#/</a>

收錄一些Java后端開發(fā)相關(guān)有學(xué)習(xí)意義的文章涩哟，歡迎投稿

會(huì)點(diǎn)前端贴彼，玩點(diǎn)后端潜腻，還會(huì)P圖，那就來這里吧

專注于分享架構(gòu)知識(shí)、架構(gòu)干貨精钮、架構(gòu)技術(shù)..........

和Spring Boot相關(guān)的一切杂拨，涵蓋Java后端技術(shù)棧专普，老司機(jī)帶你飛，飛上去撩妹吧