vue-router的导航钩子

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:`
File文件
`,
  beforeRouteEnter (to, from, next) {
    // ...do something
  },
  beforeRouteUpdate (to, from, next) {
     // ...do something
  },
  beforeRouteLeave (to, from, next) {
    // ...do something
  }
}