路由
根據(jù)不同的url地址，展示不同的內(nèi)容或頁面脯厨。
前端路由
定義：在單頁面應(yīng)用铅祸，大部分頁面結(jié)構(gòu)不變，只改變部分內(nèi)容的使用合武。
優(yōu)點(diǎn)：頁面不刷新临梗，不需要每次都從服務(wù)器全部獲取，快速展現(xiàn)給用戶稼跳，用戶體驗(yàn)好盟庞。
缺點(diǎn)：
- 使用瀏覽器的前進(jìn)，后退鍵的時候重新發(fā)送請求汤善，沒有合理的利用緩存;
- 單頁面無法記住之前滾動的位置什猖，無法在前進(jìn)票彪，后退的時候記住滾動的位置。
后端路由
定義：通過用戶請求的url導(dǎo)航到具體的html頁面不狮；每跳轉(zhuǎn)到不同的URL降铸，都是重新訪問服務(wù)器，服務(wù)器返回頁面荤傲。
頁面也可以是服務(wù)器獲取數(shù)據(jù)垮耳，然后和模板組合，返回HTML遂黍，也可以是直接返回模板HTML终佛，然后由前端[js]再去請求數(shù)據(jù)，使用前端模板和數(shù)據(jù)進(jìn)行組合雾家，生成想要的HTML铃彰。
對比
- 性能和用戶體驗(yàn)：后端路由每次訪問一個新頁面的時候都要向服務(wù)器發(fā)送請求，然后服務(wù)器響應(yīng)請求芯咧，這個過程有延時牙捉。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑，沒有網(wǎng)絡(luò)延遲敬飒，提升用戶體驗(yàn)邪铲。
- 用ajax請求，可以讓頁面無刷新无拗，頁面變了但URL沒有變化带到，用戶就不能復(fù)制到想要的地址，用前端路由做單頁面應(yīng)用解決該問題英染。但前端路由使用瀏覽器的前進(jìn)揽惹，后退鍵的時候會重新發(fā)送請求，沒有合理利用緩存四康。
vue-router前端路由原理
前端路由主要模式（實(shí)現(xiàn)方法）：hash模式和history模式
目前前端路由的實(shí)現(xiàn)方法主要有兩種搪搏，咯擦體哦你。hash和window.history闪金。
- 通過location.hash實(shí)現(xiàn)前端路由
定義:hash是url中#后面的部分疯溺，也叫做url的錨部分，本身用來做頁面定位的哎垦，它可以使對應(yīng)id的元素顯示在可視區(qū)域內(nèi)喝检。
由于hash值的變化不會導(dǎo)致瀏覽器向服務(wù)器發(fā)起取嗯求，而且hash改變會觸發(fā)haschange事件撼泛，該事件可以實(shí)時監(jiān)聽url中hash值的變化挠说，由此來根據(jù)hash值的變化進(jìn)行Dom的切換操作，瀏覽器的前進(jìn)后退也能對其進(jìn)行控制愿题。
onhashchange的語法如下：
HTML中：
<element onhashchange="myScript">
Javascipt中：
object.onhashchange=function(){myScript};
Javascript中损俭，使用addEventListener()方法： object.addEventListener("hashchange", myScript);
onhashchange事件有如下幾種觸發(fā)條件：
a)改變url地址蛙奖，在最后面增加或改變其hash值；
b)改變location.href或location.hash的值杆兵；
c)點(diǎn)擊帶有錨點(diǎn)的鏈接雁仲；
d)瀏覽器前進(jìn)后退可能導(dǎo)致hash的變化，前提是兩個網(wǎng)頁地址中的hash值不同琐脏。
利用Hash實(shí)現(xiàn)前端路由： 設(shè)計(jì)思路：當(dāng)瀏覽器地址欄url的hash值發(fā)生變化時攒砖，就會觸發(fā)onhashchange事件，這時通過window.location.hash可以拿到當(dāng)前瀏覽器的url的hash值日裙，注意此時的hash值是帶有#的吹艇，因此需要對其值進(jìn)行相應(yīng)的處理，去掉#昂拂，并且如果當(dāng)前url不含hash值的話受神，就將其當(dāng)做根目錄處理。之后將url和相應(yīng)的組件函數(shù)進(jìn)行映射格侯，根據(jù)不同的hash值執(zhí)行不同的回調(diào)函數(shù)鼻听，也就是加載相應(yīng)的組件。
- 通過window.history和popstate實(shí)現(xiàn)前端路由
hash 本來是拿來做頁面定位的联四，如果拿來做路由的話撑碴，原來的錨點(diǎn)功能就不能用了。其次朝墩，hash 的傳參是基于 url 的灰羽，如果要傳遞復(fù)雜的數(shù)據(jù)，會有體積的限制鱼辙，而 history 模式不僅可以在url里放參數(shù)，還可以將數(shù)據(jù)存放在一個特定的對象中玫镐。
瀏覽器窗口為用戶提供一個history對象倒戏，用來保存用戶操作頁面的歷史，我們在瀏覽網(wǎng)頁時的前進(jìn)后退操作都是基于這個對象來實(shí)現(xiàn)的恐似。用到的接口history.pushState()和history.replaceState()
pushState()和replaceState()方法很類似杜跷，二者均接受三個參數(shù)，分別是state矫夷、title和url葛闷。其中state用來存放將要插入的history實(shí)體的相關(guān)信息，它是一個json格式的參數(shù)双藕；title就是傳入history實(shí)體的標(biāo)題淑趾，需要注意的是firefox現(xiàn)在會自動忽略掉這個參數(shù)；url用來傳遞新的history實(shí)體的相對路徑忧陪，如果其值為null則表示當(dāng)前要插入的history實(shí)體與前一個實(shí)體一致扣泊，沒有改變近范。replaceState()方法與pushState()方法的唯一區(qū)別在于，replaceState()方法會將最新一條的history實(shí)體覆蓋掉延蟹，而不是直接添加评矩，這種情況在處理例如登錄頁面這些不需要記錄到history中的情況時非常有用。
這里需要注意的是history提供的這兩個方法不會主動觸發(fā)瀏覽器頁面的刷新阱飘，只是history對象包括地址欄的內(nèi)容會發(fā)生改變斥杜，當(dāng)出發(fā)前進(jìn)后退等history事件時才會進(jìn)行相應(yīng)的響應(yīng)。另外沥匈，作為參數(shù)傳入的url也會受到同源策略的限制蔗喂，如果出現(xiàn)跨域等情況會導(dǎo)致報錯。 popstate是官方提供的事件咐熙，當(dāng)history中的記錄發(fā)生改變時就會觸發(fā)該事件弱恒。利用history實(shí)現(xiàn)前端路由： 設(shè)計(jì)思路：當(dāng)想要跳轉(zhuǎn)到指定url的時候，將目標(biāo)url通過pushState()或者replaceState()方法填入到history和地址欄中棋恼，此時由于上述兩種方法不會主動進(jìn)行頁面刷新返弹，因此頁面仍停留在當(dāng)前頁面，只是url地址發(fā)生了改變爪飘。之后通過popstate事件響應(yīng)义起，執(zhí)行相應(yīng)的回調(diào)函數(shù)，實(shí)現(xiàn)前端組件間的切換师崎。
http://www.reibang.com/p/5231e7e125da
前端渲染和后端渲染
- 前端渲染：指得是后端返回JSON數(shù)據(jù)默终，前端利用預(yù)先寫的html模板，循環(huán)讀取JSON數(shù)據(jù)犁罩，拼接字符串（es6模板字符串）齐蔽，并插入頁面。
好處：網(wǎng)絡(luò)傳輸數(shù)據(jù)量小床估。不占用服務(wù)端運(yùn)算資源（解析模板）含滴，模板在前端（很有可能僅部分在前端），改結(jié)構(gòu)變交互都前端自己來了丐巫，改完自己調(diào)就行谈况。
壞處：前端耗時較多，對前端工作人員水平要求相對較高递胧。前端代碼較多碑韵，因?yàn)椴糠忠郧霸诤笈_處理的交互邏輯交給了前端處理。占用少部分客戶端運(yùn)算資源用于解析模板缎脾。
- 后端渲染：前端請求祝闻，后端用后臺模板引擎直接生成html，前端接受到數(shù)據(jù)之后遗菠，直接插入頁面治筒。
好處：前端耗時少屉栓，即減少了首屏?xí)r間，模板統(tǒng)一在后端耸袜。前端（相對）省事友多，不占用客戶端運(yùn)算資源（解析模板）
壞處：占用服務(wù)器資源。
