路由這個概念最早在後端出現，隨後前後端分離，直至當今的單頁面應用，路由也在一直發生變化。本文來總結一下路由變化和vue-router中的路由模式區別相關知識點。
早期的頁面都是由html頁面在服務端渲染的，服務端直接返回給客戶端渲染好的html頁面供展示，乙個頁面對應乙個url,首先向服務端請求對應的url,伺服器根據此url去匹配對應的controller,最終生成html頁面返回給客戶端。這種方法有利於seo的優化，但是這種頁面html和資料邏輯混合在一塊，開發人員開發維護起來困難。
隨著ajax的出現，由了前後端分離的開發方式，後端只負責邏輯處理和返回資料，前端只負責通過ajax將資料渲染到頁面。
其實spa最主要的特點就是在前後端分離的基礎上加了一層前端路由.也就是前端來維護一套路由規則。
vue-router的作用就是通過改變url，在不重新請求頁面的情況下，更新頁面檢視。簡單的說就是，雖然位址列的位址改變了，但是並不是乙個全新的頁面，而是之前的頁面某些部分進行了修改。要想解決上面的問題，前提需要知道瀏覽器window的history物件和location物件的hash屬性(詳情見 history物件詳解)，這兩個物件分別存在頁面路徑跳轉，但是頁面不重新整理的功能。
location.hash 對應 "(#)" 後面的字串，比如：
對應的值為 "#heading"，後面 hash 值的變化，並不會導致瀏覽器向伺服器發出請求，瀏覽器不發出請求，也就不會重新整理頁面。另外每次 hash 值的變化，還會觸發 hashchange 這個事件，通過這個事件我們就可以知道 hash 值發生了哪些變化。然後我們便可以監聽 hashchange 來實現更新頁面部分內容的操作：比如下面的**監聽乙個網頁 hash 值變化
window.addeventlistener('hashchange', function
() ,
false);
當網頁點選返回或者前進的時候，hash值會發生變化，會觸發上面的hashchange事件並列印。
window.addeventlistener('popstate', function
() ,
false);
同：hash和history都是屬於瀏覽器自身的特性，vue-router只是利用了這兩個特性（通過呼叫瀏覽器介面）來實現前端路由。
不同：hash模式 會在瀏覽器的url中加入'#'，而htm5history就沒有'#'號，url和正常的url一樣。
history比於直接修改hash主要有以下優勢：
a、pushstate設定的新url可以是與當前url同源的任意url；而hash只可修改#後面的部分，故只可設定與當前同文件的url；
b、pushstate設定的新url可以與當前url一模一樣，這樣也會把記錄新增到棧中；而hash設定的新值必須與原來不一樣才會觸發記錄新增到棧中；
c、pushstate通過stateobject可以新增任意型別的資料到記錄中；而hash只可新增短字串，且pushstate可額外設定title屬性供後續使用。
以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。
前端 Vue路由
為了提高瀏覽器頁面響應速度，在功能的開發中，應該盡量避免建立多個頁面，因為瀏覽器在頁面的跳轉過程中會先刪除之前的介面，然後重新渲染新載入介面上的dom元素，這一過程中會給瀏覽器造成很大的壓力。這樣就有了spa。vue.js路由允許我們通過不同的url訪問不同的內容，實現spa。1 引入對應的vue ...
Vue前端路由
因為是基於vue的前端路由 所以需要先引入vue 之後再引用vue router.1.首先要找到示例vue控制的區域 留下乙個路由佔位符顯示模板的內容 2.在vue中有乙個新的標籤user和a標籤相似 to user 就等價於 herf user 3.要在script中寫跳轉的模板 4.將模板掛載到...
Vue前端路由
路由是乙個比較廣義和抽象的概念，路由的本質就是對應關係。在開發中，路由分為 1.後端路由 2.前端路由 spa 1.spa 2.前端路由 3.實現簡易的前端路由 監聽window的onhashchange 事件，根據獲取到的最新的hash值，切換要顯示的元件的名稱 window.onhashchan...