Vue-Router的路由钩子函数是在路由跳转的不同阶段执行的函数,用于在路由发生变化时执行特定的操作或逻辑。这些钩子函数允许开发者在路由进入、离开或更新时添加自定义行为。
Vue-Router的路由钩子函数可以分为以下几类:
-
全局钩子函数:
beforeEach
:在路由跳转之前执行,可以用于进行权限判断、加载数据等操作。该函数接收三个参数:to
(即将进入的路由对象)、from
(当前导航即将离开的路由对象)和next
(一个必须调用的函数,用于解析钩子)。beforeResolve
(2.5+):在路由被解析之后,但在组件被渲染之前执行。afterEach
:在路由跳转之后执行,通常用于进行页面跳转后的收尾工作,如页面标题的更新等。
-
路由独享的钩子函数:
beforeEnter
:在路由配置中定义,只在进入该路由时执行。
-
组件内的钩子函数:
beforeRouteEnter
:在路由进入之前被调用,此时组件实例还未被创建,不能访问this
。beforeRouteUpdate
(2.2+):在当前路由改变,但是该组件被复用时调用,如路由参数变化时。beforeRouteLeave
:在离开当前路由时调用。
执行顺序:
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave
守卫。 - 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫(2.2+)。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫(2.5+)。 - 导航被确认。
- 调用全局的
afterEach
钩子。
这些钩子函数允许开发者在路由的不同阶段添加自定义逻辑,从而实现更复杂的路由导航控制和组件状态管理。