vue-router钩子函数和具体的执行流程

前言

vue-router 有几种钩子函数？具体是什么及执行流程是怎样的？

思维导图：

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。也就是：全局守卫、路由守卫、组件守卫。

全局前置守卫，在路由跳转前触发，它在每次导航时都会触发。

router.beforeEach((to, from, next) => {
  console.log('to:', to);
  console.log('from:', from);
      next();
  })

beforeEach 全局前置守卫接收三个参数：

next 参数可以不添加，但是一旦添加，则必须调用一次，否则路由跳转等会停止。

next()方法的几种情况

返回值：

全局解析守卫，在路由跳转前，所有组件内守卫和异步路由组件被解析之后触发，它同样在每次导航时都会触发。

通过 router.beforeResolve 注册一个全局解析守卫：

1
2
3

router.beforeResolve((to, from, next) => {
  next();
})

回调参数，返回值和 beforeEach 一样。也可以定义多个全局解析守卫。

全局后置钩子，它发生在路由跳转完成后，beforeEach 和 beforeResolve 之后，beforeRouteEnter（组件内守卫）之前。它同样在每次导航时都会触发。

通过 router.afterEach 注册一个全局后置钩子：

router.afterEach((to, from) => {
  console.log('to:', to);
  console.log('from:', from);
})

路由守卫只有一个，就是 beforeEnter，beforeEnter 守卫只在进入路由时触发，不会在 params、query 或 hash 改变时触发。

{
  path: '/a',
  component: () => import('../components/A.vue'),
  beforeEnter: (to, from) => {
   console.log('beforeEnter ');
  },
}

beforeRouteEnter(to, from) {
  // 在渲染该组件的对应路由被验证前调用
  // 不能获取组件实例 `this` ！
  // 因为当守卫执行时，组件实例还没被创建！
},

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

不过，你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数：

  beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

beforeRouteUpdate (to, from) {
  // just use `this`
  this.name = to.params.name
}

beforeRouteLeave (to, from) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (!answer) return false
}

beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了