vue-router的钩子函数

311 阅读1分钟

用于全局导航的钩子函数

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){
    // 在离开组件时进行调用
}