關於路由
路由（routing）是指從源到目的地時，決定端到端路徑的決策過程。 對於VueRouter而言，路由就是根據一個請求路徑選中一個組件進行 渲染的決策過程：
VueRouter包括三個主要組成部分 —— VueRouter、router-view和 router-link：
-
VueRouter ：路由器類，根據路由請求在路由視圖中動態渲染選中的組件
-
router-link ：路由鏈接組件，聲明用以提交路由請求的用戶接口
-
router-view：路由視圖組件，負責動態渲染路由選中的組件
路由器完全依賴於其路由表進行路由決策，因此，在創建路由器實例時，我們需要 對所有可能的路由（從路徑向組件的映射關係）進行配置。
Hello, VueRouter
開發一個VueRouter版的hello,world只需要四步：
1、創建路由器實例
路由器完全依賴於路由表來分發路由請求，因此創建路由器實例時，需要使用routes配置項來聲明請求路徑（path）和組件（component）的對應關係 —— 記錄這一映射關係的對象，在VueRouter中被稱爲路由記錄（RouteRecord）。 路由器將根據routes路由記錄數組來構造路由表。
例如，下面的代碼創建了包含兩條路由及記錄的路由器實例router：
const router = new VueRouter({
routes:[
{ path:'/', component: EzHome},
{ path:'/about', component: EzAbout}
]
})
當請求路徑/時，路由器將選中組件EzHome；當請求路徑/about時，路由器 將選中組件EzAbout。
2、將路由器注入Vue實例
如果在一個Vue實例的模板中需要使用router-link和router-view組件，我們需要首先向這個Vue實例注入路由器對象，因爲這兩個組件都依賴於路由器對象：
在創建Vue實例時，使用router配置項將路由器對象注入Vue實例的$router屬性，例如：
const router = new VueRouter({...})
const vm = new Vue({ router: router })
console.log(vm.$router) //輸出router
3、聲明路由出口
路由視圖組件（router-view）爲路由器（$router）提供了所選中組件 的渲染出口。在模板中，使用標籤<router-view>聲明路由視圖元素。
例如，下面示例在模板中聲明瞭一個路由視圖：
<router-view></router-view>
聲明路由請求接口
路由鏈接組件（router-link）爲用戶提供了提交路由請求的交互接口。 使用to屬性來聲明鏈接組件的目標路徑。當用戶點擊鏈接組件時，組件 向路由器提交向目標路徑的路由請求。在模板中，使用<router-link> 標籤聲明路由鏈接元素。
例如，下面的示例聲明瞭一個目標路徑爲/about的路由鏈接：
<router-link to="/about">ABOUT</router-link>
路由鏈接組件默認渲染爲一個a元素，因此在視圖DOM中，上面的模板對應於DOM結構：
<a href="...">ABOUT</a>
路由鏈接組件的激活樣式類
成組的鏈接組件用來做組件的導航再合適不過了。VueRouter貼心地爲選中的路由鏈接元素添加了激活樣式類來幫助我們醒目地展示激活的鏈接：
router-link-active
激活的router-link組件自帶樣式類router-link-active。因此我們可以利用 這個樣式類來爲賦予選中的鏈接組件不同的外觀：
是否爲鏈接組件添加router-link-active樣式類的默認判別規則是：鏈接組件的 目標路徑（to屬性值）是否包含當前激活路由的路徑（$route.path）。因此在上圖中，當激活BLOGS鏈接元素（目標路徑：/blogs）時，HOME鏈接元素（目標路徑：/）也被添加了router-link-active 樣式類 —— 路徑/包含了所有以/開頭的路徑!
有兩個方案解決這一問題：
-
爲目標路徑爲/的鏈接組件應用exact屬性，要求VueRouter只有在精確匹配 （to屬性值與$router.path完全相等）時才添加router-link-active樣式類
-
使用router-link-exact-active樣式類
router-link-exact-active
只有當鏈接組件的目標路徑精確匹配活動路由的路徑時，鏈接組件纔會被添加router-link-exact-active樣式類：
使用命名路由
在配置路由記錄時，也可以利用name屬性，將其聲明爲命名路由。 例如，下面的路由記錄聲明瞭一條名爲about的命名路由：
{path:'/about',component:EzAbout,name:'about'}
router-link組件也支持使用名稱來聲明目標路由。不過，我們需要將to屬性使用v-bind指令綁定到對象形式的字面量，否則將被視爲 字符串。
例如，下面的模板使用對象字面量設置鏈接組件的to屬性，根據之前 的路由記錄，下面的三種寫法是等效的：
<router-link to="/path">ABOUT</router-link>
<router-link :to="{name:'about'}">ABOUT</router-link>
<router-link :to="{path:'/about'}">ABOUT</router-link>
這種對象形式的目標路由聲明，在VueRouter裏被稱爲定位對象（Location）。 路徑形式的路由請求，也將被轉化爲定位對象再進行路由匹配。
路由匹配算法概述
路由器實例化時，根據routes配置項聲明的路由記錄數組，構造兩張核心路由表：pathMap和nameMap，分別以路徑（例如：/about）和 路由名（例如：about）爲鍵，以規範處理後的路由記錄爲值，來實現路由 的快速匹配。
當路由器接收到一個路由請求時（例如，點擊router-link組件），路由器 將根據請求的定位對象是否包含name屬性，分別查找nameMap 和pathMap這兩張路由表來進行路由查找：
很顯然，使用nameMap表進行命名路由的匹配只需要一步，而使用pathMap進行路徑匹配則 （最壞情況下）需要遍歷整個路由表，利用每一個路徑模式來嘗試匹配請求路徑。因此在可能 的情況下，都應當使用命名路由。
路由重定向和別名
也可以在路由記錄中聲明從一個路徑到另一個路徑的映射—— 路由重定向。 例如，下面的路由記錄聲明瞭從路徑/archives向路徑/blogs的重定向：
{path: '/archives' , redirect:'/blogs'}
對於上例的路由配置，當路由器匹配了對路徑/archives的請求時，將再度 繼續執行對路徑/blogs的匹配：
重定向路由記錄的聲明也支持使用命名路由。例如，下面的示例將路徑/archives 重定向到命名路由blogs —— 對於命名路由，我們只能採用定位對象的寫法：
{path:'/archives', redirect:{name:'blogs'}}
路徑別名
別名（alias）用來爲一個路徑創建另一個訪問點。例如，下面的路由記錄 爲路徑/blogs創建了別名路徑/：
{path:'/blogs',component: EzBlogs , alias:'/archives'}
當路由器匹配了對根路徑/的路由請求時，不會再繼續匹配路徑/blogs， 而是直接根據所選中路由記錄的聲明，構造路由信息對象，渲染EzBlogs組件。
redirect vs. alias
重定向（redirect）和別名（alias）最大的區別在於：重定向請求的路徑 和實際激活的路徑是不同的，而別名的請求路徑和激活路徑是一致的：
更多的vue-router實戰示例內容可以到匯智網(www.hubwiz.com，本文內容來自匯智網，邊學邊練，所學所見。
