## 一、概述 路由就是URL到函數的映射，在 Web 服務的程序中，不同路徑對應著各自的處理邏輯，程序會把請求交給路徑所對應的處理邏輯，這樣就完成了一次「路由分發」，這個分發就是通過「路由」來完成的。簡單的說，路由是根據不同的 url 地址展示不同的內容或頁面； 路由為前端路由和后端路由； 后端路由：對于普通的網站，所有的超鏈接都是url地址，所有url都對應服務器上對應的資源，通過用戶請求的url導航到具體的html頁面； 前端路由：通過配置js文件，把后端路由的工作拿到前端來做； 后端路由是傳統的路由處理方式，這里著重介紹前端路由； ## 二、基于hash實現的前端路由 它的 URI 規則中需要帶上#； ``` 1 http://10.0.0.1/ 2 http://10.0.0.1/#/about 3 http://10.0.0.1/#/concat ``` Web 服務不會解析 hash，也就是說 # 后的內容 Web 服務都會自動忽略，但是 JavaScript 是可以通過 window.location.hash 讀取到的，讀取到路徑加以解析之后就可以響應不同路徑的邏輯處理。 ### hash有以下幾個特性： 1. hash僅僅是客戶端的一個狀態，也就是說，當向服務器發請求的時候，hash部分并不會發過去。 2. hash值的改變，都會在瀏覽器的訪問歷史中增加一個記錄。因此我們能通過瀏覽器的回退、前進按鈕控制hash的切換。 ### 觸發hash變化的兩種方式： 1. 通過a標簽，并設置href屬性，當用戶點擊這個標簽后，URL就會發生改變，也就會觸發hashchange事件了： ``` <a href="#srtian">srtian</a> ``` 2. 直接使用JavaScript來對loaction.hash進行賦值，從而改變URL，觸發hashchange事件： ``` location.hash="#srtian" ``` ## 三、基于history API實現的前端路由 history 是 HTML5 才有的新 API，可以用來操作瀏覽器的 session history； ``` 1 http://10.0.0.1/ 2 http://10.0.0.1/about 3 http://10.0.0.1/concat ``` ``` window.history.pushState(state, title, url) ``` 其中state和title可以為空,url中填上/ 、/about、/concat ## 四、前端路由的使用場景 前端路由更多用在單頁應用上, 也就是SPA, 因為單頁應用, 基本上都是前后端分離的, 后端自然也就不會給前端提供路由。 ## 五、Vue-router庫 Vue-router是基于單頁面使用，多頁面直接使用服務端路由系統就可以了。 每一個路由規則都是一個對象。 | 名稱 | 說明 | | --- | --- | | path | 表示監聽哪一個路由鏈接地址。| | componrnt |表示路由是前面匹配到的path，則顯示component對應的那個組件。 | | name| 給這個頁面路徑定義一個名字，當在頁面進行跳轉的時候也可以使用名字跳轉。具有唯一性。| 可以使用```<router-link to='路徑'></router-link>```實現跳轉； rourter.push()