參考資料：vue-router官方文檔 （https://router.vuejs.org/zh/guide/）

一碰凶、動(dòng)態(tài)路由匹配

1.如果經(jīng)常需要把某種模式匹配到的所有路由全部映射到同個(gè)組件蚁袭，那么可以用動(dòng)態(tài)路徑參數(shù)來(lái)達(dá)到這個(gè)效果膜钓。

2.動(dòng)態(tài)路徑：{path:'/user/:id/profile',component:User} 桃煎，可以用$route.params.id來(lái)取參。

3.動(dòng)態(tài)路徑跟path:'/user?id=12' 有多大的差別愕乎？覺(jué)得差不多阵苇。

4.路由參數(shù)的變化，如果從'/user/12'到'/user/14'感论，組件User會(huì)被復(fù)用绅项，生命周期鉤子不會(huì)再被調(diào)用，需要通過(guò)"watch對(duì)象$route"或者導(dǎo)航守衛(wèi)beforRouteUpdate()來(lái)監(jiān)測(cè)路由參數(shù)的變化比肄。那如果從'/user/12'到'/play/14'再到'/user/14'快耿，組件User會(huì)被復(fù)用嗎囊陡？

二、編程式導(dǎo)航

router.push()掀亥、router.replace()撞反、router.go()

replace幾乎沒(méi)用過(guò)

三、命名路由

用命名視圖和直接放組件本身有什么差別搪花？感覺(jué)沒(méi)有

四遏片、重定向和別名

routes:[{path:'/a',redirect:'/b'}，{path:'/a',alias:'/b'}]

重定向：當(dāng)用戶(hù)訪(fǎng)問(wèn)'/a'時(shí)撮竿，會(huì)直接到'/b';訪(fǎng)問(wèn)'/b',還是到'/b'

別名：當(dāng)用戶(hù)訪(fǎng)問(wèn)'/a'時(shí)吮便，還是到'/a';訪(fǎng)問(wèn)'/b',會(huì)直接到'/a'

別名功能可以讓我們自由將UI結(jié)構(gòu)映射到任意的URL。

五幢踏、路由組件傳參

使用$route.params可以將參數(shù)傳遞給組件髓需，但如果在組件中使用$route.params來(lái)獲取參數(shù)，會(huì)讓組件和$route高度耦合房蝉，使組件只能在某些特定的URL上使用僚匆，限制了其靈活性。

可以使用props將組件和路由解耦搭幻，在組件中可以按props的格式獲取到參數(shù)咧擂。

是不是也可以使用正常的props方式給這個(gè)組件傳參？是的粗卜，這也應(yīng)該就是用props解耦的目的屋确。

用法：

1.布爾模式：將props屬性直接設(shè)置為true,route.params就會(huì)被設(shè)置成組件屬性

{path:'/user/:id',component:User,props:true}

2.對(duì)象模式

{path:'/promotion/from-newsletter',component:Promotion,props:{newsletterPopup:false}}

3.函數(shù)模式

{path:'/search',component:SearchUser,props:(route)=>({query:route.query.q})}

六、HTML5 History模式

使用history模式時(shí)续扔，需要后端配置支持，在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源焕数，如果URL匹配不到任何靜態(tài)資源纱昧，也應(yīng)該返回index.html。

這么做了之后堡赔，服務(wù)器就不再返回404錯(cuò)誤頁(yè)面了识脆。為了判斷是否是404，應(yīng)該在router中覆蓋所有路由的情況善已，然后再給出一個(gè)404頁(yè)面灼捂。

routes:[{path:'*',component:NotFoundComponent}，{path:'/home',component:Home}]

不需要將404放在最后换团。檢測(cè)原理應(yīng)該是遍歷（除*的之外）其他所有路徑悉稠，如果都不匹配，則匹配上*艘包。

七的猛、導(dǎo)航守衛(wèi)

1.全局路由守衛(wèi)

router.beforeEach() 可以用來(lái)：檢查全局用戶(hù)信息是否獲取耀盗、權(quán)限

參數(shù):

? ? to:即將進(jìn)入的路由

? ? from:正要離開(kāi)的路由

? ? next:一定要調(diào)用next方法來(lái)resolve這個(gè)鉤子，不然會(huì)一直在等待中卦尊，頁(yè)面不會(huì)跳轉(zhuǎn)

? ? ? ? next():進(jìn)行管道中的下一個(gè)鉤子

? ? ? ? next(false):中斷當(dāng)前的跳轉(zhuǎn)叛拷，重置到from的地址

? ? ? ? next({path:'/'}):跳轉(zhuǎn)到一個(gè)不同的地址，可以設(shè)置replace:true的屬性

? ? ? ? next(error):如果傳入next的參數(shù)是一個(gè)Error實(shí)例岂却，那么導(dǎo)航被終止忿薇，且錯(cuò)誤被傳遞給router.onError()注冊(cè)過(guò)的回調(diào)

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

beforeEnter(to,from,next)

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

beforeRouteEnter:不能直接獲取組件實(shí)例this ，但是可以在next中通過(guò)vm來(lái)訪(fǎng)問(wèn)組件實(shí)例? next(vm => { })

beforRouteUpdate:to和from路徑渲染同一個(gè)組件時(shí)會(huì)被觸發(fā)躏哩，可以訪(fǎng)問(wèn)組件實(shí)例this

beforeRouteLeave:導(dǎo)航離開(kāi)該組件對(duì)應(yīng)的路由時(shí)調(diào)用署浩，可以訪(fǎng)問(wèn)組件實(shí)例

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

? ? 導(dǎo)航被觸發(fā)

? ? 在失活的組件里調(diào)用離開(kāi)守衛(wèi)

? ? 調(diào)用全局的beforeEach守衛(wèi)

? ? 在重用的組件里調(diào)用beforeRouteUpdate

? ? 在路由配置里調(diào)用beforeEnter

? ? ?解析異步路由組件

? ? 在被激活的組件里調(diào)用beforeRouteEnter

? ? 調(diào)用全局的beforeResolve守衛(wèi)

? ? 導(dǎo)航被確認(rèn)

? ? 調(diào)用全局的afterEach

? ? 觸發(fā)DOM更新

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

八、路由元信息

meta字段震庭，'{path:'bar' , component:Bar, meta:{ requiresAuth:true}}'

如果路由是嵌套的瑰抵，一個(gè)URL可能會(huì)匹配多個(gè)路由記錄（父、子）器联，匹配記錄會(huì)在route.matched數(shù)組中二汛。可以給每個(gè)路由記錄的meta里設(shè)置titile屬性拨拓，然后通過(guò)route.matched組合出導(dǎo)航欄的面包屑肴颊。

單個(gè)路由記錄的meta屬性可以直接通過(guò)route.meta取得。

九渣磷、數(shù)據(jù)獲取

進(jìn)入某個(gè)路由后婿着，需要從服務(wù)器獲取數(shù)據(jù)，可以用兩種方式實(shí)現(xiàn)醋界。一個(gè)是竟宋，先完成導(dǎo)航，然后在后面的組件的生命周期鉤子中獲取數(shù)據(jù)形纺，在數(shù)據(jù)獲取期間顯示加載中的提示丘侠。另一個(gè)是，在導(dǎo)航完成之前逐样，在路由守衛(wèi)中獲取數(shù)據(jù)蜗字，獲取成功之后再執(zhí)行導(dǎo)航，在獲取數(shù)據(jù)的過(guò)程中最好也給一些提示脂新。兩種方法相差不大挪捕，只看你想要哪種方式。

十争便、滾動(dòng)行為

vue-router可以定義路由切換之后级零，頁(yè)面是滾動(dòng)到頂部還是保持原先的位置。該功能只在支持history的瀏覽器中可用始花。

routes:[],

scrollBehavior(to,from,savedPosition){

? ? //return 期望滾動(dòng)到哪個(gè)位置 妄讯。比如：{ x: number, y: number }孩锡，或savedPosition，或{ selector: string, offset? : { x: number, y: number }}亥贸。

}

參數(shù)savedPosition 當(dāng)且僅當(dāng)popstate導(dǎo)航(通過(guò)瀏覽器的前進(jìn)/后退 按鈕觸發(fā))時(shí)才可用躬窜。

如果返回savedPosition，在按下前進(jìn)/后退按鈕時(shí)炕置，會(huì)像瀏覽器的原生表現(xiàn)那樣荣挨。

如果返回falsy或者空對(duì)象，那么不會(huì)發(fā)生滾動(dòng)朴摊。

還可以滾動(dòng)到錨點(diǎn)默垄，return { selector: to.hash}

十一、路由懶加載

當(dāng)項(xiàng)目過(guò)大時(shí)甚纲，JavaScript包會(huì)很大口锭，會(huì)影響頁(yè)面的加載速度。如果能夠把不同路由對(duì)應(yīng)的組件分割成不同的代碼分別打包介杆，然后在路由被訪(fǎng)問(wèn)時(shí)才加載對(duì)應(yīng)的組件鹃操，這樣就會(huì)更加高效，這就是路由懶加載春哨。

路由懶加載的三種實(shí)現(xiàn)方式：

1.vue異步組件寫(xiě)法

{path: '/home', name: 'home',?component: resolve =>?require(['@/components/home'],resolve)?}

2.ES中的import寫(xiě)法

const?Home = () => import('@/components/home')

3.webpack里提供的require.ensure()

{ path: '/home', name: 'home', component: resolve => require.ensure([], () => resolve(require('@/components/home')), 'demo') },