vue路由的钩子函数

Vue Router 提供了丰富的钩子函数，这些钩子函数允许我们在路由发生变化时执行某些操作。下面我将列举并详细解释这些钩子函数，并给出示例代码。

1. 全局守卫

全局守卫是定义在路由配置文件上的守卫，它们会在路由发生变化时按照创建顺序调用。

• beforeEach：全局前置守卫，进入路由之前调用。
• beforeResolve：在路由得到最终确认之前调用（在 beforeEach 和组件内守卫之后，afterEach 守卫之前）。
• afterEach：全局后置钩子，进入路由之后调用。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
// ...
next()
})

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

router.afterEach((to, from) => {
// ...
})

2、路由独享的守卫

你可以在路由配置中直接定义 beforeEnter 守卫：

const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
next()
}
}
]
})

3、组件内的守卫

• beforeRouteEnter：组件被渲染之前调用，此时组件实例还未创建，不能访问 this。
• beforeRouteUpdate：路由改变，但是该组件被复用时调用。
• beforeRouteLeave：导航离开该组件的对应路由时调用。

在组件内部定义守卫时，需要使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 生命周期钩子：

<template>
<!-- 组件模板 -->
</template>

<script>
export default {
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 因为在组件被复用的情况下，组件的生命周期钩子不会被调用，因此你需要这个钩子来对这个情况进行处理。
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
</script>

在这些钩子函数中，to 和 from 是路由对象，分别表示目标路由和当前路由。next 是一个函数，必须调用该方法来 resolve 这个钩子。如果不调用 next，则整个导航都会停滞。

这些钩子函数为我们提供了强大的路由控制能力，可以根据需求进行灵活使用。