本篇内容主要讲解“vue的导航钩子有哪些及怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue的导航钩子有哪些及怎么使用”吧!

vue的导航钩子有3种：1、全局守卫钩子，是指路由示例上直接操作的钩子函数，特点是所有路由配置的组件都会触发。2、路由独享守卫钩子，是指在单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用。3、局部守卫钩子，是指在组件内执行的钩子函数，类似于数组内的生命周期函数，相当于为配置路由的组件添加的生命周期钩子函数。

导航钩子的作用

• vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。

导航钩子的分类

• 全局守卫

• 路由独享守卫

• 局部守卫

1、全局守卫

是指路由示例上直接操作的钩子函数，特点是所有路由配置的组件都会触发。简单点说就是触发路由就会触发这些钩子函数。钩子函数执行顺序包括beforeEach、beforeResolve、afterEach三个。

[beforeEach]

 router.beforeEach  router.beforeResolve  router.afterEach
    const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });

• to：代表要进入的目标，它是一个路由对象

• from：代表当前正要离开的路由，同样也是一个路由对象

• next：这是一个必须需要调用的方法，而具体的执行效果则依赖next方法调用的参数

[beforeResolve]

区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就会被调用。

即在beforeEach和组件内beforeRouteEnter之后，afterEach之后，afterEach之前调用。

[afterEach]

 const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });
  //全局后置钩子，后置钩子并没有 next 函数，也不会改变导航本身
    router.afterEach((to, from) => {
        // do someting
    });

2、路由独享守卫

是指在单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用。其位置如下，也就是像File这样的组件都存在这样的钩子函数。目前它只有一个钩子函数beforeEnter。

[beforeEnter]

  cont router = new VueRouter({
        routes: [
            {
                path: '/file',
                component: File,
                beforeEnter: (to, from ,next) => {
                    // do someting
                }
            }
        ]
    });

3、局部守卫

是指在组件内执行的钩子函数，类似于数组内的生命周期函数，相当于为配置路由的组件添加的生命周期钩子函数。钩子函数按执行顺序包括beforeRouteEnter、beforeRouteUpdate(2.2新增)、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
            // 导航离开该组件的对应路由时被调用
        }
    }

路由跳转导航解析流程，当由A路由