vue-router導(dǎo)航鉤子
- vue-router導(dǎo)航鉤子的主要作用是攔截導(dǎo)航，讓路由完成跳轉(zhuǎn)或者取消；
- 導(dǎo)航鉤子分類：全局守衛(wèi)栽连、局部守衛(wèi)饿幅、路由獨(dú)享守衛(wèi)凡辱；
全局守衛(wèi)
- 指的所有路由配置的組建都會(huì)被觸發(fā)的鉤子；
- 鉤子函數(shù)執(zhí)行順序：beforeEach栗恩、beforeResolve透乾、afterEach；
// beforeEach：在路由跳轉(zhuǎn)前觸發(fā)摄凡，這個(gè)鉤子作用主要是用于登錄驗(yàn)證
const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
// do someting
});
/* beforeResolve：這個(gè)鉤子和beforeEach類似续徽，也是路由跳轉(zhuǎn)前觸發(fā)，
但它在在beforeEach和組件內(nèi)beforeRouteEnter之后亲澡，afterEach之前調(diào)用钦扭。
*/
// afterEach：和beforeEach相反，它是在路由跳轉(zhuǎn)完成之后觸發(fā)
router.afterEach((to, from) => {
// do someting
});
局部守衛(wèi)
- 組件內(nèi)執(zhí)行的鉤子函數(shù)床绪，相當(dāng)于為配置路由的組件添加的生命周期鉤子函數(shù)客情；
- 鉤子函數(shù)執(zhí)行順序：beforeRouteEnter、beforeRouteUpdate癞己、beforeRouteLeave膀斋；
const comp = {
template: `<div>This is file</div>`,
beforeRouteEnter(to, from, next) {
// do someting
// 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
},
beforeRouteUpdate(to, from, next) {
// do someting
// 在當(dāng)前路由改變，但是依然渲染該組件是調(diào)用
},
beforeRouteLeave(to, from ,next) {
// do someting
// 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)被調(diào)用
}
}
路由獨(dú)享守衛(wèi)
- 單個(gè)路由配置的時(shí)候也可以設(shè)置的鉤子函數(shù)痹雅，且只能在這個(gè)路由下起作用仰担；
- 它只有一個(gè)鉤子函數(shù)beforeEnter；
cont router = new VueRouter({
routes: [
{
path: '/file',
component: File,
beforeEnter: (to, from ,next) => {
// do someting
}
}
]
});
組件路由跳轉(zhuǎn) - A路由–>B路由流程解析(局部-全局-獨(dú)享-局部-全局)
- 在A組件里調(diào)用離開守衛(wèi)绩社，A組件中的beforeRouteLeave摔蓝；
- 調(diào)用全局的beforeEach守衛(wèi)， router.beforeEach愉耙；
- 再執(zhí)行B路由配置里調(diào)用beforeEnter贮尉；
- 再執(zhí)行B組件的進(jìn)入守衛(wèi)，B組件中beforeRouteEnter朴沿；
- 調(diào)用全局的beforeResolve守衛(wèi)(2.5+)猜谚，router.beforeResolve；
- 導(dǎo)航被確認(rèn)赌渣；
- 調(diào)用全局的afterEach鉤子：router.afterEach魏铅；
- 觸發(fā)DOM更新。
