vue-router的導航鉤子有:1.全局導航鉤子;2.組件內的鉤子;3.單獨路由獨享組。
vue-router的導航鉤子有三種,分別是:1.全局導航鉤子;2.組件內的鉤子;3.單獨路由獨享組,主要是用來攔截導航,讓他完成跳轉或取消,以下是導航鉤子的使用示例:
1.全局導航鉤子。
注意:全局導航鉤子主要有前置守衛和后置鉤子兩種。
//前置守衛
const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
// do someting
});
//后置鉤子
router.afterEach((to, from) => {
// do someting
});
2.組件內的鉤子。
注意:組件內的導航鉤子主要有beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave這三種。
const File = {template: `<div>This is file</div>`,
beforeRouteEnter(to, from, next) {
// do someting
// 在渲染該組件的對應路由被 confirm 前調用
},
beforeRouteUpdate(to, from, next) {
// do someting
// 在當前路由改變,但是依然渲染該組件是調用
},
beforeRouteLeave(to, from ,next) {
// do someting
// 導航離開該組件的對應路由時被調用
}
}
3.單獨路由獨享組。
//在路由配置上直接進行定義
cont router = new VueRouter({
routes: [
{
path: '/file',
component: File,
beforeEnter: (to, from ,next) => {
// do someting
}
}
]
});