本來這一節(jié)是想按著順序控淡，從前面的react首頁結(jié)束嫌吠，開始說React-router這一節(jié)的，但我覺得很又必要大概說一下掺炭，我們?yōu)槭裁匆褂们岸寺酚杀枳纾P(guān)于前端路由我們所能想到的一些知識點。
1涧狮、先說說后端路由
說起前端路由炕矮，我們肯定會想到后端路由，我們以前經(jīng)痴咴看見訪問一個網(wǎng)址肤视，大概路徑是這個樣子的，比如：
www.xx.com/index
www.xx.com/index.do
www.xx.com/index.action
www.xx.com/index.jsp
www.xx.com/index.html
等等這些譬嚣，其實都大概可以看出后端路由的影子钢颂，這些平臺或者網(wǎng)站，你幾乎每添加一個展示頁面拜银，都需要后臺代碼的支撐殊鞭，或者需要后臺架構(gòu)某些配置項的支撐，否則你添加的頁面是無法展示到客戶眼前的尼桶。
而且既然是后臺路由操灿，那么我們展示的每個url路徑肯定是受后臺控制的，言外之意就是我們本來要訪問index.html泵督，但當用戶輸入www.xx.com/index.html的時候趾盐，后臺是可以做攔截處理的，后臺甚至可以把路徑進行重定向小腊，結(jié)果給我們展示了list.html救鲤；所以只有后臺給我們攔截以后再放開這個攔截，前端的頁面才得以展示秩冈；這樣我們就可以得出本缠，幾乎每個頁面的展示都要受網(wǎng)速的限制，受我們后臺架構(gòu)是否足夠優(yōu)化的限制入问，我們大多數(shù)頁面都需要用ajax來獲取數(shù)據(jù)來進行展示丹锹，但當我們點擊瀏覽器的回退按鈕的時候，經(jīng)常會出現(xiàn)這樣一個bug芬失，前一個頁面的ajax數(shù)據(jù)就不見了楣黍，不得不重新獲取，而且網(wǎng)頁回退棱烂，你會發(fā)現(xiàn)你的js邏輯會重新走一遍租漂，但如果前一個頁面因為我們用js邏輯修改過html內(nèi)容，html是不會重新渲染的。說得更直白點就是窜锯，比如我們有一個div张肾，我們用js給他動態(tài)添加了一個自定義屬性aname="1" 芭析，當點擊回退按鈕的時候锚扎，aname=“1”還在，html內(nèi)容不會重新渲染馁启。
2驾孔、前端路由又有哪些好處？
剛才我們說了后端路由惯疙，其實后端路由有點原始翠勉，甚至是好幾年前的前后臺不分工的情況下很常用的，那個時候天還是藍的沒有什么霧霾霉颠，蘋果也是用來吃的对碌，人們對頁面要求度也是不高的，更多的是關(guān)注后臺邏輯功能蒿偎，慢慢的互聯(lián)網(wǎng)行業(yè)起來了朽们，人們發(fā)現(xiàn)前臺頁面是否友好，效果是否絢爛诉位，色覺是否舒服骑脱，交互是否順暢，流程是否簡約苍糠，加載速度是否夠快叁丧，都在一定程度上決定著你這個網(wǎng)站在用戶心中的分值。
那么前端路由給我們帶來什么好處呢岳瞭？
（1） 有了前端路由拥娄，其實更利于我們做前后端分離開發(fā)，后端寫他們自己的后臺邏輯瞳筏，給我們提供一些跨域的接口稚瘾，或者是我們本地模擬跨域，后臺先給我們準備一些測試數(shù)據(jù)乏矾，這樣將更有利于我們前端開發(fā)孟抗；以前開發(fā)前端，總是等待后臺給添加數(shù)據(jù)钻心，這樣無形中造成了時間成本凄硼；等項目開發(fā)完成，前端代碼可以部署在獨自一臺服務(wù)器下捷沸，也可以再和后臺代碼進行整合摊沉，部署在同一臺服務(wù)器下；
（2）前端路由就是前端控制跳轉(zhuǎn)痒给，這個頁面的展示速度不再受后臺控制说墨，甚至比我們剛學(xué)html的時候骏全，通過a標簽的href跳轉(zhuǎn)更快；
（3）前端路由雖然表現(xiàn)的和后端路由也比較相似尼斧，但很多時候通過前端路由我們可以做模塊化思路開發(fā)姜贡，讓思路變得更清晰，而且使用了react以后你會慢慢發(fā)現(xiàn)棺棵，我們甚至可以多個人協(xié)同完成同一個頁面的內(nèi)容楼咳，因為我們可以每人完成一個小組件；
（4）前端路由形式也很多烛恤，現(xiàn)在比較提倡app單頁開發(fā)母怜，所以前端路由用于單頁開發(fā)以后，你會發(fā)現(xiàn)點擊瀏覽器回退按鈕后缚柏，之前的ajax獲取的數(shù)據(jù)仍然是存在的苹熏，為我們節(jié)省了前后臺數(shù)據(jù)交互
其實好處那么多，我更看中第一條币喧，前端可以脫離開后臺架構(gòu)的路由控制
3轨域、前端路由有哪些形式？
前端路由形式也很多粱锐，這些都是架構(gòu)決定的疙挺，換言之就是寫前端框架的人的思路。我們很多時候總會羨慕別人發(fā)家致富怜浅，很多時候我們也驚奇的發(fā)現(xiàn)別人起家的思路我們也曾有過铐然，所以不管在哪個時代，有思路的人值得我們羨慕恶座，將思路可以很好的運用的人更值得我們崇拜搀暑。
（1） 之前用過jquery-mobile的時候，其實整個APP會在一個大htm里來開發(fā)跨琳，每個小頁面在一個小div里進行開發(fā)自点，當前需要展示那個div，就把其他div都隱藏脉让，把當前這個div進行展示桂敛。因為大部分數(shù)據(jù)是需要后臺獲取的，所以加載頁面的時候頁面里可能更多的是一些空的dom元素溅潜，這樣也不會太影響頁面的加載速度术唬；當我們點擊切換到其他頁面的時候再進行數(shù)據(jù)獲取滚澜；當我們再切換到其他頁面的時候粗仓，這個頁面的數(shù)據(jù)已經(jīng)被緩存，達到了一個很好的單頁面APP的效果。
這種思路借浊，首頁路徑展示為www.xx.com/index.html塘淑，列表頁（其實也就是列表那個div）路徑展示為www.xx.com/index.html#list，其實列表頁的那個div的id就是list蚂斤，對應(yīng)著的詳情頁路徑展示為www.xx.com/index.html#detail存捺，所以詳情頁的對應(yīng)div的id頁應(yīng)該是detail
（2）react-router 同樣也是單頁面開發(fā)的前端路由，只不過時代進步了橡淆，他更多的體現(xiàn)出了模塊化區(qū)分開發(fā)的思路召噩。每個頁面就不是一個div了母赵，而且采用es6的模塊化逸爵，每個所謂的頁面變成了獨立的模塊，后續(xù)我們會說到react-router使用后凹嘲，每個頁面的展示思路师倔；
（3） 接觸過angularjs的小伙伴們會發(fā)現(xiàn)，前端路由可以指配html頁面周蹭，根據(jù)angular前端路由來控制哪個路徑下應(yīng)該由哪個html的內(nèi)容渲染到我們的主頁面上趋艘；
其實說了那么多，小伙伴們可能覺得很麻煩凶朗，我還不如準備好多html,自己來控制a標簽的href跳轉(zhuǎn)呢瓷胧。這就看你的項目更適合哪種情況，你殺死了敵人棚愤，不會有首長因為你使用的是菜刀而不是大炮而批評你的搓萧，大炮雖然更先進，但需要花時間去學(xué)習(xí)如何使用宛畦，會消耗炮彈瘸洛，需要運送費用等等，所以我們的開發(fā)中次和，沒有最適合反肋，只有更合適。
4踏施、絕對路徑的base標簽
既然說到前后斷分離開發(fā)石蔗，那么就會有一個絕對路徑和相對路徑的問題。以前做jsp項目開發(fā)的時候畅形，大部分時候使用的絕對路徑养距，后來做分離開發(fā)使用的是相對路徑，但上線要和后臺代碼部署到同一個tomcat下束亏，結(jié)果我的相對路徑就出了問題铃在，很不好改。html中有base這個標簽，base標簽會有href屬性定铜，這個是頁面的基準路徑阳液。舉個栗子，比如我們給頁面設(shè)定 base href="www.xx.com/" ?揣炕，然后頁面引入css的時候 link rel="stylesheet" href="style/demo.css" ?帘皿，其實最終你的這個demo.css展示的路徑就是www.xx.com/style.demo.css了，是不是很好用呢畸陡。
相信隨著時間和技術(shù)的發(fā)展鹰溜，前端路由以后一定會出現(xiàn)更多種形式，而且react-router的各個版本使用姿勢都不一樣丁恭。我們期待著以后的架構(gòu)將會學(xué)習(xí)成本越來越低曹动，功能越來越強悍，我們也期待著自己懂得越來越多牲览，但事情往往事與愿違墓陈，我們總是需要不斷得跟隨著先行者們?nèi)W(xué)習(xí)。前端框架不斷得出現(xiàn)第献，先行者們不斷得發(fā)大招乾巧，我們不經(jīng)意間就被秒殺得體無完膚凯旭，但卻也是更多得無奈，還是得勇敢得站起來，去學(xué)習(xí)存崖，去進取以避免被快速得技術(shù)發(fā)展所淘汰零酪。我還是希望能給更多得小伙伴帶來一些易學(xué)易懂得東西蜜托，喜歡得小伙伴請關(guān)注下一節(jié)：狗屎一樣的React（第八節(jié)聪全，React-router 4.0的使用姿勢）
