Vue-Router 入門與提升實戰示例

關於路由

路由（routing）是指從源到目的地時，決定端到端路徑的決策過程。 對於VueRouter而言，路由就是根據一個請求路徑選中一個組件進行 渲染的決策過程：

VueRouter包括三個主要組成部分 —— VueRouter、router-view和 router-link：

• VueRouter ：路由器類，根據路由請求在路由視圖中動態渲染選中的組件

• router-link ：路由連接組件，聲明用以提交路由請求的用戶接口

• router-view：路由視圖組件，負責動態渲染路由選中的組件

路由器徹底依賴於其路由表進行路由決策，所以，在建立路由器實例時，咱們須要 對全部可能的路由（從路徑向組件的映射關係）進行配置。

Hello, VueRouter

開發一個VueRouter版的hello,world只須要四步：

一、建立路由器實例

路由器徹底依賴於路由表來分發路由請求，所以建立路由器實例時，須要使用routes配置項來聲明請求路徑（path）和組件（component）的對應關係 —— 記錄這一映射關係的對象，在VueRouter中被稱爲路由記錄（RouteRecord）。 路由器將根據routes路由記錄數組來構造路由表。

例如，下面的代碼建立了包含兩條路由及記錄的路由器實例router：

const router = new VueRouter({
     routes:[
               { path:'/', component: EzHome},
               { path:'/about', component: EzAbout}
               ]
})

當請求路徑/時，路由器將選中組件EzHome；當請求路徑/about時，路由器 將選中組件EzAbout。

二、將路由器注入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

三、聲明路由出口

路由視圖組件（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，本文內容來自匯智網，邊學邊練，所學所見。