參考資料：vue-router官方文檔 （https://router.vuejs.org/zh/guide/）
一、動態(tài)路由匹配
1.如果經(jīng)常需要把某種模式匹配到的所有路由全部映射到同個組件，那么可以用動態(tài)路徑參數(shù)來達到這個效果。
2.動態(tài)路徑：{path:'/user/:id/profile',component:User} ，可以用$route.params.id來取參。
3.動態(tài)路徑跟path:'/user?id=12' 有多大的差別？覺得差不多。
4.路由參數(shù)的變化，如果從'/user/12'到'/user/14'，組件User會被復(fù)用，生命周期鉤子不會再被調(diào)用，需要通過"watch對象$route"或者導(dǎo)航守衛(wèi)beforRouteUpdate()來監(jiān)測路由參數(shù)的變化。那如果從'/user/12'到'/play/14'再到'/user/14'，組件User會被復(fù)用嗎？
二、編程式導(dǎo)航
router.push()、router.replace()、router.go()
replace幾乎沒用過
三、命名路由
用命名視圖和直接放組件本身有什么差別？感覺沒有
四、重定向和別名
routes:[{path:'/a',redirect:'/b'}，{path:'/a',alias:'/b'}]
重定向：當(dāng)用戶訪問'/a'時，會直接到'/b';訪問'/b',還是到'/b'
別名：當(dāng)用戶訪問'/a'時，還是到'/a';訪問'/b',會直接到'/a'
別名功能可以讓我們自由將UI結(jié)構(gòu)映射到任意的URL。
五、路由組件傳參
使用$route.params可以將參數(shù)傳遞給組件，但如果在組件中使用$route.params來獲取參數(shù)，會讓組件和$route高度耦合，使組件只能在某些特定的URL上使用，限制了其靈活性。
可以使用props將組件和路由解耦，在組件中可以按props的格式獲取到參數(shù)。
是不是也可以使用正常的props方式給這個組件傳參？是的，這也應(yīng)該就是用props解耦的目的。
用法：
1.布爾模式：將props屬性直接設(shè)置為true,route.params就會被設(shè)置成組件屬性
{path:'/user/:id',component:User,props:true}
2.對象模式
{path:'/promotion/from-newsletter',component:Promotion,props:{newsletterPopup:false}}
3.函數(shù)模式
{path:'/search',component:SearchUser,props:(route)=>({query:route.query.q})}
六、HTML5 History模式
使用history模式時，需要后端配置支持，在服務(wù)端增加一個覆蓋所有情況的候選資源，如果URL匹配不到任何靜態(tài)資源，也應(yīng)該返回index.html。
這么做了之后，服務(wù)器就不再返回404錯誤頁面了。為了判斷是否是404，應(yīng)該在router中覆蓋所有路由的情況，然后再給出一個404頁面。
routes:[{path:'*',component:NotFoundComponent}，{path:'/home',component:Home}]
不需要將404放在最后。檢測原理應(yīng)該是遍歷（除*的之外）其他所有路徑，如果都不匹配，則匹配上*。
七、導(dǎo)航守衛(wèi)
1.全局路由守衛(wèi)
router.beforeEach() 可以用來：檢查全局用戶信息是否獲取、權(quán)限
參數(shù):
? ? to:即將進入的路由
? ? from:正要離開的路由
? ? next:一定要調(diào)用next方法來resolve這個鉤子，不然會一直在等待中，頁面不會跳轉(zhuǎn)
? ? ? ? next():進行管道中的下一個鉤子
? ? ? ? next(false):中斷當(dāng)前的跳轉(zhuǎn)，重置到from的地址
? ? ? ? next({path:'/'}):跳轉(zhuǎn)到一個不同的地址，可以設(shè)置replace:true的屬性
? ? ? ? next(error):如果傳入next的參數(shù)是一個Error實例，那么導(dǎo)航被終止，且錯誤被傳遞給router.onError()注冊過的回調(diào)
2.路由獨享守衛(wèi)
beforeEnter(to,from,next)
3.組件內(nèi)的守衛(wèi)
beforeRouteEnter:不能直接獲取組件實例this ，但是可以在next中通過vm來訪問組件實例? next(vm => { })
beforRouteUpdate:to和from路徑渲染同一個組件時會被觸發(fā)，可以訪問組件實例this
beforeRouteLeave:導(dǎo)航離開該組件對應(yīng)的路由時調(diào)用，可以訪問組件實例
4.完整的導(dǎo)航解析流程
? ? 導(dǎo)航被觸發(fā)
? ? 在失活的組件里調(diào)用離開守衛(wèi)
? ? 調(diào)用全局的beforeEach守衛(wèi)
? ? 在重用的組件里調(diào)用beforeRouteUpdate
? ? 在路由配置里調(diào)用beforeEnter
? ? ?解析異步路由組件
? ? 在被激活的組件里調(diào)用beforeRouteEnter
? ? 調(diào)用全局的beforeResolve守衛(wèi)
? ? 導(dǎo)航被確認
? ? 調(diào)用全局的afterEach
? ? 觸發(fā)DOM更新
? ? 用創(chuàng)建好的實例調(diào)用beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)
八、路由元信息
meta字段，'{path:'bar' , component:Bar, meta:{ requiresAuth:true}}'
如果路由是嵌套的，一個URL可能會匹配多個路由記錄（父、子），匹配記錄會在route.matched數(shù)組中?？梢越o每個路由記錄的meta里設(shè)置titile屬性，然后通過route.matched組合出導(dǎo)航欄的面包屑。
單個路由記錄的meta屬性可以直接通過route.meta取得。
九、數(shù)據(jù)獲取
進入某個路由后，需要從服務(wù)器獲取數(shù)據(jù)，可以用兩種方式實現(xiàn)。一個是，先完成導(dǎo)航，然后在后面的組件的生命周期鉤子中獲取數(shù)據(jù)，在數(shù)據(jù)獲取期間顯示加載中的提示。另一個是，在導(dǎo)航完成之前，在路由守衛(wèi)中獲取數(shù)據(jù)，獲取成功之后再執(zhí)行導(dǎo)航，在獲取數(shù)據(jù)的過程中最好也給一些提示。兩種方法相差不大，只看你想要哪種方式。
十、滾動行為
vue-router可以定義路由切換之后，頁面是滾動到頂部還是保持原先的位置。該功能只在支持history的瀏覽器中可用。
routes:[],
scrollBehavior(to,from,savedPosition){
? ? //return 期望滾動到哪個位置 。比如：{ x: number, y: number }，或savedPosition，或{ selector: string, offset? : { x: number, y: number }}。
}
參數(shù)savedPosition 當(dāng)且僅當(dāng)popstate導(dǎo)航(通過瀏覽器的前進/后退 按鈕觸發(fā))時才可用。
如果返回savedPosition，在按下前進/后退按鈕時，會像瀏覽器的原生表現(xiàn)那樣。
如果返回falsy或者空對象，那么不會發(fā)生滾動。
還可以滾動到錨點，return { selector: to.hash}
十一、路由懶加載
當(dāng)項目過大時，JavaScript包會很大，會影響頁面的加載速度。如果能夠把不同路由對應(yīng)的組件分割成不同的代碼分別打包，然后在路由被訪問時才加載對應(yīng)的組件，這樣就會更加高效，這就是路由懶加載。
路由懶加載的三種實現(xiàn)方式：
1.vue異步組件寫法
{path: '/home', name: 'home',?component: resolve =>?require(['@/components/home'],resolve)?}
2.ES中的import寫法
const?Home = () => import('@/components/home')
3.webpack里提供的require.ensure()
{ path: '/home', name: 'home', component: resolve => require.ensure([], () => resolve(require('@/components/home')), 'demo') },
