跳到主要内容

简述vue-router 路由钩子函数是什么?执行顺序是什么?

参考答案:

vue-router 是 Vue.js 的官方路由管理器,它提供了丰富的路由钩子函数,这些钩子函数在路由的不同阶段执行,允许我们在路由改变前后执行一些特定的逻辑。

以下是一些常用的 vue-router 路由钩子函数:

  1. 全局前置守卫beforeEach

    • 执行顺序:全局前置守卫最先执行。
    • 作用:在路由改变前执行,可以用于登录验证、权限检查等。
  2. 路由独享的守卫beforeEnter

    • 执行顺序:在全局前置守卫之后,全局解析守卫之前。
    • 作用:在路由配置中单独为某个路由定义守卫。
  3. 全局解析守卫beforeResolve

    • 执行顺序:在路由独享守卫之后。
    • 作用:与 beforeEach 类似,不过 beforeResolve 是在所有守卫中最晚执行的。
  4. 全局后置钩子afterEach

    • 执行顺序:在所有守卫和路由组件内的守卫之后。
    • 作用:在路由改变完成后执行,用于记录日志、发送统计信息等。
  5. 路由组件内的守卫

    • beforeRouteEnter:在路由组件被渲染前执行。
    • beforeRouteUpdate:在当前路由改变,但是该组件被复用时执行。
    • beforeRouteLeave:在导航离开该组件的对应路由时执行。

执行顺序(从先到后):

  1. beforeEach
  2. beforeResolve
  3. beforeEnter
  4. beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
  5. afterEach

需要注意的是,这些钩子函数的执行顺序可能会因为特定的路由配置和导航触发方式而略有不同。因此,在实际使用时,最好结合具体的路由配置和触发导航的场景来理解和使用这些钩子函数。