vue-router中的钩子函数和执行顺序说明

让我们详细讲解一下vue-router中的钩子函数和执行顺序说明。

路由钩子函数

路由钩子函数是在路由状态发生变化时执行的一些函数，可以用来控制路由的行为。

全局钩子函数

全局钩子函数分别有：

beforeEach: 在进入路由之前执行，可以用来做一些导航守卫
afterEach: 在进入路由之后执行，可以用来做一些后续处理
beforeResolve: 在解析路由之前执行，用于异步路由场景

路由独享的钩子函数

路由独享的钩子函数可以定义在单个路由配置中，只会对该路由生效。

beforeEnter: 进入该路由前执行的钩子函数

组件内的钩子函数

在组件的生命周期中，也存在一些专门用于路由的钩子函数，例如：

beforeRouteEnter: 在进入路由前，组件实例化之前执行
beforeRouteUpdate: 路由更新时执行，在该组件被复用时调用
beforeRouteLeave: 离开该路由前执行的钩子函数

在组件中使用这些钩子函数时，需要使用this.$route拿到当前的路由对象，用于判断路由是否发生变化以及执行一些行为。

钩子函数的执行顺序

钩子函数的执行顺序如下：

全局的 beforeEach 钩子函数
路由独享的 beforeEnter 钩子函数
解析异步路由配置 (beforeResolve)
组件内钩子函数
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
全局的 afterEach 钩子函数

需要注意的是，在导航守卫中，如果调用了next方法之前没有返回任何值，则表示进入下一个钩子函数。如果返回了false，则表示中断导航。

下面我们看两个示例。

示例一

router.beforeEach((to, from, next) => {
  console.log('全局 beforeEach 钩子函数')
  next()
})

router.beforeResolve((to, from, next) => {
  console.log('解析异步路由 beforeResolve 钩子函数')
  next()
})

router.afterEach((to, from) => {
  console.log('全局 afterEach 钩子函数')
})

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      beforeEnter: (to, from, next) => {
        console.log('路由独享 beforeEnter 钩子函数')
        next()
      },
      children: [
        {
          path: 'about',
          component: About,
          beforeEnter: (to, from, next) => {
            console.log('嵌套路由独享 beforeEnter 钩子函数')
            next()
          }
        }
      ]
    }
  ]
})

执行结果：

全局 beforeEach 钩子函数
路由独享 beforeEnter 钩子函数
嵌套路由独享 beforeEnter 钩子函数
解析异步路由 beforeResolve 钩子函数
全局 afterEach 钩子函数

示例二

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        {
          path: 'about',
          component: About,
          beforeRouteEnter (to, from, next) {
            console.log('组件内的 beforeRouteEnter 钩子函数')
            next()
          },
          beforeRouteUpdate (to, from, next) {
            console.log('组件内的 beforeRouteUpdate 钩子函数')
            next()
          },
          beforeRouteLeave (to, from, next) {
            console.log('组件内的 beforeRouteLeave 钩子函数')
            next()
          }
        }
      ]
    }
  ]
})