&emsp;&emsp;雖然Vue.js未提供路由功能，但是官方推出了Vue Router（即vue-router庫），以插件的形式支持。它與Vue.js深度集成，可快速的創建單頁應用（Single Page Application，SPA）。 ## 一、基本用法 &emsp;&emsp;首先需要引入vue和vue-router兩個庫，如果像下面這樣全局引用（即存在全局變量Vue），那么vue-router會自動調用Vue.use()方法注冊其自身；但如果以模塊的方式引用，那么就得顯式地調用Vue.use()。 ~~~ <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> ~~~ &emsp;&emsp;然后添加兩個內置的組件，第一個是導航用的router-link組件，它默認會被渲染成\<a>元素，如果要渲染成其它元素，那么可以使用它的tag屬性；第二個是路徑匹配時用于渲染視圖的router-view組件，它還是一個函數式組件，如下所示。 ~~~ <div id="container"> <router-link to="/main">首頁</router-link> <router-link to="/list">列表</router-link> <router-view></router-view> </div> ~~~ &emsp;&emsp;再聲明要渲染的組件，這些組件會與指定的路由映射，下面是兩個非常簡單的自定義組件。 ~~~ const Main = { template: '<div>首頁</div>' }; const List = { template: '<div>列表</div>' }; ~~~ &emsp;&emsp;接著定義路由配置，添加一組路徑以及對應的組件，如下所示。 ~~~ const routes = [ { path: '/main', component: Main }, { path: '/list', component: List } ]; ~~~ &emsp;&emsp;最后創建路由器實例，并將之前的路由配置傳遞進來，在掛載根實例時，需要將它注入，從而讓整個應用都有路由功能，如下所示。 ~~~ const router = new VueRouter({ routes: routes }); var vm = new Vue({ el: "#container", router: router }); ~~~ &emsp;&emsp;注意，router實例包含三個導航方法：push()、replace()和go()，可以用編程的方式進行導航。 &emsp;&emsp;頁面在渲染完成后，得到的DOM結構如下所示，此時router-view組件所占的位置無任何內容。 ~~~ <div id="container"> <a href="#/main" class="">首頁</a> <a href="#/list" class="">列表</a> </div> ~~~ &emsp;&emsp;當router-link組件所對應的路由匹配成功時，其渲染出的元素會被自動添加一個CSS類：router-link-active。例如點擊首頁鏈接，得到的結構如下所示，注意，此時router-view組件被替換成了Main組件中的內容。 ~~~ <div id="container"> <a href="#/main" class="router-link-active">首頁</a> <a href="#/list" class="">列表</a> <div>首頁</div> </div> ~~~ ## 二、路由模式 &emsp;&emsp;Vue Router默認采用URL hash模式來保持頁面和URL的同步，其創建的URL格式需要包含井號（#），如下所示。 ~~~ http://pwstrick.com/#/main ~~~ &emsp;&emsp;Vue Router還有另外一種history模式，利用HTML5 History來保持頁面和URL的同步，其創建的URL格式在視覺上更為簡潔清晰，如下所示。 ~~~ http://pwstrick.com/main ~~~ &emsp;&emsp;如果要開啟history模式，那么需要在路由配置時添加mode選項，并賦予history關鍵字，如下所示（直接修改了上一節中的示例）。 ~~~ const router = new VueRouter({ mode: "history", routes: routes }); ~~~ &emsp;&emsp;注意，當直接訪問history模式創建的URL時，會返回一個404頁面。為了避免這種情況的發生，建議在服務器上配置一個默認的候選頁面。 ## 三、路由 &emsp;&emsp;本節不僅會介紹動態路由的概念，還會分析路由的命名和嵌套等操作。 **1）動態路由** &emsp;&emsp;Vue Router采用的路徑匹配引擎是path-to-regexp，它支持動態路由的匹配，例如有一個List組件，需要根據路徑中的頁碼參數把組件渲染成不同的內容，可以像下面這樣配置。 ~~~ const List = { template: '<div>{{$route.params.page}}</div>' }; const routes = [ { path: '/list/:page', component: List } ]; ~~~ &emsp;&emsp;在路由配置中，以冒號開頭的:page是路徑參數，它的值會被保存到路由對象$route的params屬性中。路由對象不僅包含解析URL得到的信息（例如路徑、查詢字符串、錨點等），還有匹配到的路由信息（例如路由名稱、路由記錄等）。當路徑是/list/1時，$route.params的值為{page: 1}，params是一個對象，其鍵值與路徑參數對應。注意，一條路徑可以包含多個不同的路徑參數。 &emsp;&emsp;當一個路徑能匹配多個路由時，匹配優先級會按照路由的定義順序來排，即先定義的，優先級高。下面的配置包含兩個路由，當路徑是/list/1時，只會渲染List組件。 ~~~ const routes = [ { path: '/list/:page', component: List }, { path: '/list/1', component: Main } ]; ~~~ **2）命名路由** &emsp;&emsp;可以在配置時為路由標識一個名稱，從而就能在使用時省略路徑了，如下所示，name屬性的值就是路由名稱。 ~~~ const routes = [ { path: '/list/:page', component: List, name: "list" } ]; ~~~ &emsp;&emsp;如果要導航到一個命名路由，那么需要動態地綁定to屬性，并為其傳入路由的名稱以及可選的URL參數，如下所示。 ~~~ <router-link :to="{ name: 'list', params: {page: 3} }">第三頁</router-link> ~~~ **3）嵌套路由** &emsp;&emsp;Vue Router允許嵌套路由，可通過多層嵌套的組件實現。下面是一個使用示例，首先在一個組件中聲明router-view視圖組件，如下所示。 ~~~ const List = { template: '<router-view></router-view>' }; const Detail = { template: '<div>詳情</div>' }; ~~~ &emsp;&emsp;然后在路由配置中，添加children選項，并定義子路由。 ~~~ const routes = [ { path: "/list", component: List, children: [{ path: "detail", component: Detail }] } ]; ~~~ &emsp;&emsp;在經過這一系列操作后，當路徑是/list/detail時，Detail組件就會被渲染到List組件的視圖中。 &emsp;&emsp;嵌套路由可用來渲染多個不同層級的視圖，而利用命名視圖可渲染多個同級的視圖。在下面的代碼中，為第二個router-view組件添加了name屬性，賦予它一個名稱，而第一個router-view組件的默認名稱為default。 ~~~ <router-view></router-view> <router-view name="detail"></router-view> ~~~ &emsp;&emsp;在路由配置時，新增用于記錄各個命名組件的components選項，如下所示。 ~~~ const routes = [ { path: "/named", components: { default: Main, detail: Detail } } ]; ~~~ &emsp;&emsp;當路徑是/named時，Main和Detail兩個組件會被同時渲染。 ## 四、重定向和別名 **1）重定向** &emsp;&emsp;在路由配置中，通過redirect選項可重定向到一個新的頁面，該選項可取的值有三種，分別是路徑、命名路由和回調函數，如下所示，其中函數中的to參數表示目標路由對象。 ~~~ const routes = [ { path: "/list/1", redirect: "/main" }, { path: "/list/1", redirect: {name: "main"} }, { path: "/list/1", redirect: to => "/main" } ]; ~~~ &emsp;&emsp;當訪問的路徑是/list/1時，瀏覽器的地址欄會變成/main，匹配的將是路徑為/main的路由。 **2）別名** &emsp;&emsp;在路由配置中，通過alias選項可定義路由的別名，如下所示。 ~~~ const routes = [ { path: "/list/4", component: Detail, alias: "/detail" } ]; ~~~ &emsp;&emsp;當訪問的路徑是/main時，瀏覽器的地址欄保持為/main，但匹配的將是路徑為/list/4的路由。 ## 五、組件傳參 &emsp;&emsp;除了在組件中通過$route.params獲取路由參數之外，還能將路由參數作為組件的props傳入，從而將組件和路由解耦，如下所示。 ~~~ const List = { props: ["page"], template: "<div>{{page}}</div>" }; const routes = [ { path: "/list/:page", component: List, props: true } ]; ~~~ &emsp;&emsp;需要注意的是，在路由配置時要添加props選項，并賦予true后，才會讓路由參數和props關聯。 ## 六、導航守衛 &emsp;&emsp;導航守衛就是路由發生變化時的鉤子函數，Vue Router提供了三類守衛：全局、路由獨享和組件級。 **1）全局守衛** &emsp;&emsp;在路由器實例上可注冊三個全局守衛，分別是beforeEach()、beforeResolve()和afterEach()。 &emsp;&emsp;beforeEach()是一個全局前置守衛，包含三個參數（如下所示），其中to是目標路由對象、from是來源路由對象，next是一個回調函數，用于解析（resolve）當前守衛。 ~~~ router.beforeEach((to, from, next) => { next(); }); ~~~ &emsp;&emsp;由于導航在所有守衛解析之前會處于等待狀態（即不會改變路徑，也不會渲染對應的組件），因此在回調中不能省略next()函數。注意，該函數不僅能處理導航，還能將其中斷或重定向，甚至注冊一個錯誤。 &emsp;&emsp;beforeResolve()是一個全局解析守衛，其參數和beforeEach()的相同，在導航被確認前，并且組件內的守衛和異步路由組件被解析之后調用。afterEach()是一個全局后置守衛，它只有to和from兩個參數。 **2）路由守衛** &emsp;&emsp;在路由配置中可直接定義beforeEnter()守衛，作用于某個單獨的路由而非全局，其參數和beforeEach()的相同，如下所示。 ~~~ const routes = [ { path: "/list", component: List, beforeEnter: (to, from, next) => { next(); } } ]; ~~~ **3）組件守衛** &emsp;&emsp;組件內的導航守衛包含三個，如下所列，它們的參數都和beforeEach()的相同，也是to、from和next。 &emsp;&emsp;（1）beforeRouteEnter()：由于該組件在導航確認前被調用，因此組件還未被創建，從而訪問this無法得到組件實例。但next()函數能接收一個參數為組件實例的回調，如下所示。 ~~~ const List = { beforeRouteEnter: function(to, from, next) { next(vm => { //vm是組件實例 }); } }; ~~~ &emsp;&emsp;（2）beforeRouteUpdate()：可通過this得到組件實例，當路由發生變化，但復用了一個組件時，會調用該守衛。例如一個路徑為/list/:page的路由（如下配置所示），在將/list/1導航至list/2時，由于渲染的都是List組件，因此會調用beforeRouteUpdate()守衛。 ~~~ const routes = [ { path: "/list/:page", component: List } ]; ~~~ &emsp;&emsp;（3）beforeRouteLeave()：也可通過this得到組件實例，當路由改變，并且渲染的組件不同時，會調用該守衛。例如有兩條路徑/main和/list，分別對應Main和List組件，在List組件中聲明了beforeRouteLeave()守衛（如下所示），當從/list導航至/main時，會彈出確認框，判斷是否需要取消本次導航。 ~~~ const List = { beforeRouteLeave: function(to, from, next) { const answer = window.confirm("是否離開當前頁？"); answer ? next() : next(false); } }; ~~~ **4）解析流程** &emsp;&emsp;完整的導航解析流程如下所列。 &emsp;&emsp;（1）導航被觸發。 &emsp;&emsp;（2）在失活的組件里調用beforeRouteLeave()守衛。 &emsp;&emsp;（3）調用全局的beforeEach()守衛。 &emsp;&emsp;（4）在重用的組件里調用beforeRouteUpdate()守衛。 &emsp;&emsp;（5）在路由配置里調用beforeEnter()守衛。 &emsp;&emsp;（6）解析異步路由組件。 &emsp;&emsp;（7）在被激活的組件里調用beforeRouteEnter()守衛。 &emsp;&emsp;（8）調用全局的beforeResolve()守衛。 &emsp;&emsp;（9）導航被確認。 &emsp;&emsp;（10）調用全局的afterEach()守衛。 &emsp;&emsp;（11）觸發DOM更新。 &emsp;&emsp;（12）用創建好的實例調用beforeRouteEnter()守衛中傳給next參數的回調函數。 ***** > 原文出處： [博客園-Vue躬行記](https://www.cnblogs.com/strick/category/1512864.html) [知乎專欄-Vue躬行記](https://zhuanlan.zhihu.com/pwvue) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。