什么是路由守卫？路由的钩子函数有哪些？分别说出使用的场景、及用法

最近在准备面试，然后整理到这个问题记录下来，一方面捋清楚自己的思路，一方面希望能帮到和我一样不是很理解的同学，或者面试被问到这个问题不知道怎么回答的同学，可能有的地方不严谨或者不对，也希望大家发现问题告诉我，我自己也好即时改正，我们一起成长。

1.什么是路由守卫？

路由守卫是在路由导航过程中用于控制和管理路由的一种机制。它允许你在路由导航前、导航后或导航过程中进行一些操作，如验证用户权限、重定向、取消导航等。

2.路由的钩子函数有哪些？

在 Vue Router 中，路由的钩子函数包括以下几种：

全局前置守卫（beforeEach）：在路由导航之前被调用，可以用于进行全局的前置验证、权限控制等操作。常用于验证用户是否登录，以及根据用户角色进行权限控制。

全局解析守卫（beforeResolve）：在路由被解析之前被调用，用于处理异步路由组件的加载。常用于在加载异步组件前显示加载动画或其他处理。

全局后置钩子（afterEach）：在路由导航完成之后被调用，可以用于进行全局的后置操作，如页面统计、日志记录等。

路由独享的守卫（beforeEnter）：在单个路由配置中定义的守卫，仅对该路由生效。常用于对特定路由进行特殊处理，如验证特定路由的参数或条件。

组件内的守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）：在组件内部定义的守卫，用于对组件的路由进行特定的处理。常用于在组件内部根据路由参数或条件进行数据加载、重定向等操作。

使用场景和用法：

• 全局前置守卫常用于验证用户登录状态，如果用户未登录，则可以重定向到登录页面。

• 全局后置钩子常用于页面统计、日志记录等操作，可以在路由导航完成后进行一些全局的收尾工作。

• 路由独享的守卫常用于对特定路由进行特殊处理，如验证路由参数、条件等。

• 组件内的守卫常用于在组件内部根据路由参数或条件进行数据加载、重定向等操作。

使用场景和用法：

1. 全局前置守卫（router.beforeEach）：这是最常用的导航守卫，主要用于检查用户的登录状态、权限等。例如，如果用户未登录，可以在此守卫中重定向用户到登录页面。

   router.beforeEach((to, from, next) => {
     if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
     else next()
   })
   

2. 全局解析守卫（router.beforeResolve）：这个守卫在全局前置守卫和组件内守卫之后调用，通常用于在导航被确认前，最后进行一些操作。

   router.beforeResolve((to, from, next) => {
     // 进行一些操作
     next()
   })
   

3. 全局后置钩子（router.afterEach）：这个钩子在导航确认后调用，常用于进行一些清理工作，或者进行页面访问统计。

   router.afterEach((to, from) => {
     // 进行一些清理工作或统计
   })
   

4. 路由独享的守卫（beforeEnter）：这个守卫定义在路由配置对象中，只对该路由有效，常用于处理特定路由的权限控制。

   {
     path: '/protected',
     component: ProtectedComponent,
     beforeEnter: (to, from, next) => {
       if (isAuthenticated) next()
       else next('/login')
     }
   }
   

5. 组件内的守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）：这些守卫定义在组件对象中，用于处理组件的路由控制。例如，beforeRouteLeave 常用于阻止用户在未保存修改前离开。

   export default {
     beforeRouteEnter(to, from, next) {
       // 在渲染该组件的对应路由被 confirm 前调用
     },
     beforeRouteUpdate(to, from, next) {
       // 在当前路由改变，但是该组件被复用时调用
     },
     beforeRouteLeave(to, from, next) {
       // 导航离开该组件的对应路由时调用
     }
   }