路由
根據不同的url地址，展示不同的內容或頁面。
前端路由
定義：在單頁面應用，大部分頁面結構不變，只改變部分內容的使用。
優點：頁面不刷新，不需要每次都從服務器全部獲取，快速展現給用戶，用戶體驗好。
缺點：
- 使用瀏覽器的前進，后退鍵的時候重新發送請求，沒有合理的利用緩存;
- 單頁面無法記住之前滾動的位置，無法在前進，后退的時候記住滾動的位置。
后端路由
定義：通過用戶請求的url導航到具體的html頁面；每跳轉到不同的URL，都是重新訪問服務器，服務器返回頁面。
頁面也可以是服務器獲取數據，然后和模板組合，返回HTML，也可以是直接返回模板HTML，然后由前端[js]再去請求數據，使用前端模板和數據進行組合，生成想要的HTML。
對比
- 性能和用戶體驗：后端路由每次訪問一個新頁面的時候都要向服務器發送請求，然后服務器響應請求，這個過程有延時。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑，沒有網絡延遲，提升用戶體驗。
- 用ajax請求，可以讓頁面無刷新，頁面變了但URL沒有變化，用戶就不能復制到想要的地址，用前端路由做單頁面應用解決該問題。但前端路由使用瀏覽器的前進，后退鍵的時候會重新發送請求，沒有合理利用緩存。
vue-router前端路由原理
前端路由主要模式（實現方法）：hash模式和history模式
目前前端路由的實現方法主要有兩種，咯擦體哦你。hash和window.history。
- 通過location.hash實現前端路由
定義:hash是url中#后面的部分，也叫做url的錨部分，本身用來做頁面定位的，它可以使對應id的元素顯示在可視區域內。
由于hash值的變化不會導致瀏覽器向服務器發起取嗯求，而且hash改變會觸發haschange事件，該事件可以實時監聽url中hash值的變化，由此來根據hash值的變化進行Dom的切換操作，瀏覽器的前進后退也能對其進行控制。
onhashchange的語法如下：
HTML中：
<element onhashchange="myScript">
Javascipt中：
object.onhashchange=function(){myScript};
Javascript中，使用addEventListener()方法： object.addEventListener("hashchange", myScript);
onhashchange事件有如下幾種觸發條件：
a)改變url地址，在最后面增加或改變其hash值；
b)改變location.href或location.hash的值；
c)點擊帶有錨點的鏈接；
d)瀏覽器前進后退可能導致hash的變化，前提是兩個網頁地址中的hash值不同。
利用Hash實現前端路由： 設計思路：當瀏覽器地址欄url的hash值發生變化時，就會觸發onhashchange事件，這時通過window.location.hash可以拿到當前瀏覽器的url的hash值，注意此時的hash值是帶有#的，因此需要對其值進行相應的處理，去掉#，并且如果當前url不含hash值的話，就將其當做根目錄處理。之后將url和相應的組件函數進行映射，根據不同的hash值執行不同的回調函數，也就是加載相應的組件。
- 通過window.history和popstate實現前端路由
hash 本來是拿來做頁面定位的，如果拿來做路由的話，原來的錨點功能就不能用了。其次，hash 的傳參是基于 url 的，如果要傳遞復雜的數據，會有體積的限制，而 history 模式不僅可以在url里放參數，還可以將數據存放在一個特定的對象中。
瀏覽器窗口為用戶提供一個history對象，用來保存用戶操作頁面的歷史，我們在瀏覽網頁時的前進后退操作都是基于這個對象來實現的。用到的接口history.pushState()和history.replaceState()
pushState()和replaceState()方法很類似，二者均接受三個參數，分別是state、title和url。其中state用來存放將要插入的history實體的相關信息，它是一個json格式的參數；title就是傳入history實體的標題，需要注意的是firefox現在會自動忽略掉這個參數；url用來傳遞新的history實體的相對路徑，如果其值為null則表示當前要插入的history實體與前一個實體一致，沒有改變。replaceState()方法與pushState()方法的唯一區別在于，replaceState()方法會將最新一條的history實體覆蓋掉，而不是直接添加，這種情況在處理例如登錄頁面這些不需要記錄到history中的情況時非常有用。
這里需要注意的是history提供的這兩個方法不會主動觸發瀏覽器頁面的刷新，只是history對象包括地址欄的內容會發生改變，當出發前進后退等history事件時才會進行相應的響應。另外，作為參數傳入的url也會受到同源策略的限制，如果出現跨域等情況會導致報錯。 popstate是官方提供的事件，當history中的記錄發生改變時就會觸發該事件。利用history實現前端路由： 設計思路：當想要跳轉到指定url的時候，將目標url通過pushState()或者replaceState()方法填入到history和地址欄中，此時由于上述兩種方法不會主動進行頁面刷新，因此頁面仍停留在當前頁面，只是url地址發生了改變。之后通過popstate事件響應，執行相應的回調函數，實現前端組件間的切換。
http://www.lxweimin.com/p/5231e7e125da
前端渲染和后端渲染
- 前端渲染：指得是后端返回JSON數據，前端利用預先寫的html模板，循環讀取JSON數據，拼接字符串（es6模板字符串），并插入頁面。
好處：網絡傳輸數據量小。不占用服務端運算資源（解析模板），模板在前端（很有可能僅部分在前端），改結構變交互都前端自己來了，改完自己調就行。
壞處：前端耗時較多，對前端工作人員水平要求相對較高。前端代碼較多，因為部分以前在后臺處理的交互邏輯交給了前端處理。占用少部分客戶端運算資源用于解析模板。
- 后端渲染：前端請求，后端用后臺模板引擎直接生成html，前端接受到數據之后，直接插入頁面。
好處：前端耗時少，即減少了首屏時間，模板統一在后端。前端（相對）省事，不占用客戶端運算資源（解析模板）
壞處：占用服務器資源。
