全局路由守卫
1、beforeEach(to, from, next) 全局前置守卫
2、beforeResolve(to, from, next) 全局解析守卫
3、afterEach(to, from, next) 全局后置守卫
const router = new VueRouter({ ... });
router.beforeEach((to, form, next) => {
console.log('全局前置守卫 beforeEach')
next()
})
router.beforeResolve((to, form, next) => {
console.log('全局解析守卫 beforeResolve')
next()
})
router.afterEach((to, form) => {
console.log('全局后置守卫 afterEach')
})
路由独享守卫
1、beforeEnter(to, from, next)
const router = new VueRouter({
routes: [{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}]
})
组件路由守卫
1、beforeRouteEnter(to, from, next)
2、beforeRouteUpdate(to, from, next)
3、beforeRouteLeave(to, from, next)
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
},
beforeRouteUpdate(to, from, next) {
},
beforeRouteLeave(to, from, next) {
},
}