別名（alias）

/a?的別名是?/b，則當(dāng)用戶訪問?/b?時(shí)擅腰，URL 會(huì)保持為?/b蟋恬，但是路由匹配為?/a翁潘，就像用戶訪問?/a?一樣。
“別名”的功能讓你可以自由地將 UI 結(jié)構(gòu)映射到任意的 URL歼争，不會(huì)受限于配置的嵌套路由結(jié)構(gòu)拜马。

?別名的寫法

路由組件傳參

使用$router會(huì)使其于路由高度耦合渗勘，從而使組件只能在特定的 URL 上使用

可以使用props對(duì)其組件和路由進(jìn)行解耦

使用props解耦的寫法

布爾模式

如果?props?被設(shè)置為?true，route.params?將會(huì)被設(shè)置為組件屬性俩莽。

對(duì)象模式

props?是一個(gè)對(duì)象旺坠，它會(huì)被按原樣設(shè)置為組件屬性，當(dāng)?props?是靜態(tài)的時(shí)候有用扮超。

函數(shù)模式

你可以創(chuàng)建一個(gè)函數(shù)返回?props取刃。這樣你便可以將參數(shù)轉(zhuǎn)換成另一種類型，將靜態(tài)值與基于路由的值結(jié)合等出刷。盡可能保持?props?函數(shù)為無狀態(tài)璧疗，因?yàn)樗粫?huì)在路由發(fā)生變化時(shí)起作用。

HTML5 History 模式

vue-router?默認(rèn)使用 hash 模式馁龟，使用 URL 的 hash 來模擬一個(gè)完整的 URL崩侠，當(dāng) URL 改變時(shí)，頁面不會(huì)重新加載坷檩。使用history模式時(shí)url會(huì)好看些（如：http://?dayou.com/user/id）却音，完成 URL 跳轉(zhuǎn)而無須重新加載頁面。這種模式需要后臺(tái)配置支持矢炼，因?yàn)槲覀兊膽?yīng)用是個(gè)單頁客戶端應(yīng)用系瓢，如果后臺(tái)沒有正確的配置，當(dāng)用戶在瀏覽器直接訪問?http://oursite.com/user/id?就會(huì)返回 404裸删。服務(wù)端需要增加一個(gè)覆蓋所有情況的候選資源八拱，如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè)?index.html?頁面涯塔。

進(jìn)階

導(dǎo)航守衛(wèi)

vue-router?提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航肌稻，參數(shù)或查詢的改變并不會(huì)觸發(fā)進(jìn)入/離開的導(dǎo)航守衛(wèi)∝拜可以觀察$router對(duì)象來應(yīng)對(duì)這些變化用?beforeRouteUpdate?的組件內(nèi)守衛(wèi)爹谭，進(jìn)入路由前先通過守衛(wèi)，來判斷是否可以通過榛搔，進(jìn)而到達(dá)頁面诺凡。

全局守衛(wèi)

使用?router.beforeEach?注冊(cè)一個(gè)全局前置守衛(wèi)，在定義router的地方定義

全局守衛(wèi)的寫法

一個(gè)導(dǎo)航觸發(fā)時(shí)践惑，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用腹泌。守衛(wèi)是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有守衛(wèi) resolve（解決） 完之前一直處于等待的狀態(tài)尔觉。

to: Route: 即將要進(jìn)入的目標(biāo)?路由對(duì)象

from: Route: 當(dāng)前導(dǎo)航正要離開的路由

next: Function: 一定要調(diào)用該方法來?resolve?這個(gè)鉤子凉袱。執(zhí)行效果依賴?next?方法的調(diào)用參數(shù)。

next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了专甩，則導(dǎo)航的狀態(tài)就是?confirmed?(確認(rèn)的)钟鸵。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動(dòng)或者瀏覽器后退按鈕)涤躲，那么 URL 地址會(huì)重置到?from?路由對(duì)應(yīng)的地址棺耍。

next('/')?或者?next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷种樱，然后進(jìn)行一個(gè)新的導(dǎo)航蒙袍。你可以向?next?傳遞任意位置對(duì)象，且允許設(shè)置諸如?replace: true嫩挤、name: 'home'之類的選項(xiàng)以及任何用在?router-link?的?to?prop?或?router.push?中的選項(xiàng)左敌。

next(error): (2.4.0+) 如果傳入?next?的參數(shù)是一個(gè)?Error?實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給?router.onError()?注冊(cè)過的回調(diào)俐镐。?

確保要調(diào)用?next?方法矫限，否則鉤子就不會(huì)被 resolved。

全局解析守衛(wèi)（ router.beforeResolve ）

和全局守衛(wèi)區(qū)別是在導(dǎo)航被確認(rèn)之前佩抹，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后叼风，解析守衛(wèi)就被調(diào)用。

全局后置鉤子

全局后置鉤子不接受next函數(shù)也不會(huì)改變導(dǎo)航本身

全局后置鉤子寫法

路由獨(dú)享守衛(wèi)

在路由配置上直接定義?beforeEnter?守衛(wèi)

路由獨(dú)享守衛(wèi)寫法

組件內(nèi)的守衛(wèi)

路由組件內(nèi)直接定義路由導(dǎo)航守衛(wèi)：beforeRouteEnter棍苹，beforeRouteUpdate无宿，beforeRouteLeave

組件內(nèi)守衛(wèi)寫法和要注意的部分

beforeRouteEnter( )不能獲取組件實(shí)例this，不過可以通過傳一個(gè)回調(diào)給?next來訪問組件實(shí)例枢里。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)孽鸡，并且把組件實(shí)例作為回調(diào)方法的參數(shù)。

組件實(shí)例作為回調(diào)方法的寫法

beforeRouteEnter?是支持next傳遞回調(diào)的唯一守衛(wèi)栏豺。

對(duì)于?beforeRouteUpdate?和?beforeRouteLeave?來說彬碱，this?已經(jīng)可用了，所以不支持傳遞回調(diào)

離開守衛(wèi)通常用來禁止用戶在還未保存修改前突然離開奥洼。該導(dǎo)航可以通過?next(false)?來取消

離開守衛(wèi)next(false)寫法

完整的導(dǎo)航解析流程

1巷疼、導(dǎo)航被觸發(fā)。

2灵奖、在失活的組件里調(diào)用離開守衛(wèi)嚼沿。

3、調(diào)用全局的?beforeEach?守衛(wèi)瓷患。

4骡尽、在重用的組件里調(diào)用?beforeRouteUpdate?守衛(wèi) (2.2+)。

5擅编、在路由配置里調(diào)用?beforeEnter攀细。

6、解析異步路由組件。

7辨图、在被激活的組件里調(diào)用?beforeRouteEnter。

8肢藐、調(diào)用全局的?beforeResolve?守衛(wèi) (2.5+)故河。

9、導(dǎo)航被確認(rèn)吆豹。

10鱼的、調(diào)用全局的?afterEach?鉤子。

11痘煤、觸發(fā) DOM 更新凑阶。

12、用創(chuàng)建好的實(shí)例調(diào)用?beforeRouteEnter?守衛(wèi)中傳給?next?的回調(diào)函數(shù)衷快。

路由元信息

定義路由的時(shí)可配置?meta?字段：

路由配置meta字段

我們稱呼?routes?配置中的每個(gè)路由對(duì)象為?路由記錄宙橱。路由記錄可以是嵌套的，因此蘸拔，當(dāng)一個(gè)路由匹配成功后师郑，可能匹配多個(gè)路由記錄

那么如何訪問這個(gè)?meta?字段呢

訪問 meta?字段

要確保最后使用了next( )

過渡效果

?是基本的動(dòng)態(tài)組件，我們可以用組件給它添加過渡效果

添加過渡效果

單個(gè)路由的過渡效果

如果只想讓部分路由有過渡效果或者想路由的效果不同可在各路由組件內(nèi)使用<transition>并且設(shè)置不同的name值

設(shè)置不同的name值

基于路由的動(dòng)態(tài)過渡效果

基于當(dāng)前路由與目標(biāo)路由的變化關(guān)系调窍，動(dòng)態(tài)設(shè)置過渡效果

動(dòng)態(tài)的綁定name

父組件判定路由動(dòng)態(tài)過渡效

數(shù)據(jù)獲取

我們經(jīng)常需要在頁面加載的時(shí)候獲取對(duì)應(yīng)的數(shù)據(jù)宝冕，我們可以通過以下的兩種方式進(jìn)行：

導(dǎo)航完成之后獲取：先完成導(dǎo)航邓萨，然后在接下來的組件生命周期鉤子中獲取數(shù)據(jù)地梨。在數(shù)據(jù)獲取期間顯示“加載中”之類的指示。

導(dǎo)航完成之前獲鹊蘅摇：導(dǎo)航完成前宝剖，在路由進(jìn)入的守衛(wèi)中獲取數(shù)據(jù)，在數(shù)據(jù)獲取成功后執(zhí)行導(dǎo)航歉甚。

導(dǎo)航完成之后獲取

當(dāng)你使用這種方式時(shí)诈闺，我們會(huì)馬上導(dǎo)航和渲染組件，然后在組件的?created?鉤子中獲取數(shù)據(jù)铃芦。這讓我們有機(jī)會(huì)在數(shù)據(jù)獲取期間展示一個(gè) loading 狀態(tài)雅镊，還可以在不同視圖間展示不同的 loading 狀態(tài)。

導(dǎo)航完成之前獲取

這種方式我們?cè)趯?dǎo)航轉(zhuǎn)入新的路由前獲取數(shù)據(jù)刃滓。我們可以在接下來的組件的?beforeRouteEnter?守衛(wèi)中獲取數(shù)據(jù)仁烹，當(dāng)數(shù)據(jù)獲取成功后只調(diào)用?next?方法。

滾動(dòng)行為

當(dāng)切換到新路由時(shí)咧虎，想要頁面滾到頂部卓缰，或是保持原先的滾動(dòng)位置，就像重新加載頁面那樣。

當(dāng)創(chuàng)建一個(gè) Router 實(shí)例征唬，你可以提供一個(gè)?scrollBehavior?方法：

滾動(dòng)到錨點(diǎn)處或者頭部?

異步滾動(dòng)

如果在不知道要滾動(dòng)到那個(gè)具體位置捌显，則可以使用異步滾動(dòng)，獲取后臺(tái)要滾動(dòng)到的具體位置总寒，返回一個(gè) Promise 來得出預(yù)期的位置描述：

異步滾動(dòng)使用實(shí)例

將其掛載到從頁面級(jí)別的過渡組件的事件上扶歪，令其滾動(dòng)行為和頁面過渡一起良好運(yùn)行是可能的

路由懶加載

當(dāng)打包構(gòu)建應(yīng)用時(shí)，Javascript 包會(huì)變得非常大摄闸，影響頁面加載善镰。

所以我們把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件年枕，這樣就更加高效了炫欺。

結(jié)合 Vue 的異步組件和 Webpack 的代碼分割功能，輕松實(shí)現(xiàn)路由組件的懶加載熏兄。

首先品洛，可以將異步組件定義為返回一個(gè) Promise 的工廠函數(shù) (該函數(shù)返回的 Promise 應(yīng)該 resolve 組件本身)：

const Foo = () => Promise.resolve({ /* 組件定義對(duì)象 */ })

第二，在 Webpack 2 中摩桶，我們可以使用動(dòng)態(tài) import語法來定義代碼分塊點(diǎn) (split point)：

import('./Foo.vue') // 返回 Promise

定義一個(gè)能夠被 Webpack 自動(dòng)代碼分割的異步組件

const Foo = () => import('./Foo.vue')

把組件按組分塊

有時(shí)候我們想把某個(gè)路由下的所有組件都打包在同個(gè)異步塊 (chunk) 中

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')

const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

Webpack 會(huì)將任何一個(gè)異步模塊與相同的塊名稱組合到相同的異步塊中毫别。