用于全局导航的钩子函数
1. vue.router.beforeEach
这个钩子是全局的前置导航守卫
vue.router.beforeEach((to,from,next)=>{
// to表示即将要进入的目标路径
to('/index')
// from表示正要离开的路由
// next是一个函数,必须调用,否则不能进行路由的跳转,因为没有next就不能放行
next()
})
2.vue.router.afterEach
在路由跳转完成后调用的钩子函数
vue.router.afterEach((to,from)=>{})
3.vue.router.beforeResolve
用法和全局前置导航守卫相似,但是这个是全局前置解析守卫,所有的守卫和异步路由解析之后才会进行调用
路由独享的守卫
vue.router.beforeEnter
可以给路由进行配置 用法与全局前置导航守卫类似
vue.router.beforeEnter((to,from.next)=>{})
组件内的守卫
1.vue.router.beforeRouterEnter
vue.router.beforeRouterEnter(to,from,next){
//在组件渲染创建之前进行调用,这个导航守卫里面没有this
}
2.vue.router.beforeRouterUpdate
vue.router.beforeRouterUpdate(to,from,next){
// 在路由发生改变,并且该组件进行复用时才会被调用
}
3.vue.router.beforeRouterLeave
vue.router.beforeRouterLeave(to,from,next){
// 在离开组件时进行调用
}