vue路由的钩子函数

在Vue.js中，当使用Vue Router进行页面路由管理时，你可以利用路由守卫（Route Guards）来实现路由的钩子函数。这些钩子函数允许你在路由发生变化时执行一些代码，比如权限验证、页面加载前的数据预获取等。Vue Router 提供了全局守卫、路由独享的守卫以及组件内的守卫。

1. 全局守卫

• beforeEach：全局前置守卫，在路由跳转前触发，每个路由跳转都会经过这个守卫。
• beforeResolve：在解析守卫之后调用，即在所有嵌套路径的组件内守卫和异步组件被解析之后调用。
• afterEach：全局后置钩子，路由跳转后触发，不接受 next 函数，也不会改变导航本身。

2. 路由独享的守卫

• beforeEnter：在路由配置中直接定义，进入路由前调用，参数为 to, from, next。

3. 组件内的守卫

• beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用，此时组件实例还没被创建，不能获取组件实例 this。可以通过传一个回调给 next 来访问组件实例。
• beforeRouteUpdate (2.2+)：在当前路由改变，但是该组件被复用时调用，例如，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此这个守卫就被调用，而不是销毁后重新创建。
• beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问组件实例 this。

示例

全局前置守卫 beforeEach

组件内的守卫 beforeRouteEnter

组件内的守卫 beforeRouteLeave

路由守卫是Vue Router中非常强大的功能，能够让你对路由的导航过程进行精细的控制。