vue-router中有7个钩子函数，主要分3类：

 

全局钩子

 

前置守卫：router.beforeEach；

 

后置守卫：router.afterEach；

 

全局解析守卫：router.beforeResolve；

 

注意：全局解析守卫（router.beforeResolve）是在所有组件内守卫和异步路由组件被解析之后（导航被确认之前）调用。

 

路由独享钩子

 

路由独享钩子：单个路由独享的导航钩子，是在路由配置上直接定义的。

 

beforeEnter（路由独享守卫）；

 

const router = new VueRouter（{

 

  routes: [

 

    {

 

      path: "/setting",

 

      component: （） => import（"@/components/setting.vue"），

 

      beforeEnter: （to, from, next） => {

 

        console.log（"beforeEnter"）;

 

        // do something

 

        next（）;

 

      },

 

    },

 

  ],

 

}）;

 

钩子函数有三个参数：to、from、next（）

 

to：router即将进入的路由对象；

 

from：当前导航即将离开的路由；

 

next（）：是一个function，进行管道中的一个钩子，如果执行完了，那导航的状态就是 confirmed（确认的），否则为false，终止导航。

 

组件内导航钩子

 

beforeRouteEnter：执行时间 ==> 渲染该组件的对应路由被 confirm 之前;

 

beforeRouteUpdate：执行时间 ==> 当前路由已经改变，但是依然渲染该组件时;

 

beforeRouteLeave：执行时间 ==> 导航离开该组件的对应路由时;

 

这三种导航钩子是在路由组件内部直接定义的。

 

const File = {

 

  template:——<div>File文件</div>——，

 

  beforeRouteEnter （to, from, next） {

 

    // …do something

 

  },

 

  beforeRouteUpdate （to, from, next） {

 

     // …do something

 

  },

 

  beforeRouteLeave （to, from, next） {

 

    // …do something

 

  }

 

}