What are the three types of Navigation Guards available in Vue.js ?

在Vue.js中，主要有三种类型的导航守卫（navigation guards），这些守卫提供了在路由发生变化时进行拦截和控制的能力，非常有用于需要在路由跳转时执行逻辑的场景，例如验证用户权限、保存编辑中的信息、或者简单的记录日志等。这三种守卫分别是：

1. 全局守卫（Global Guards）: 全局守卫是在全局路由实例上配置的，它会影响每一个路由。在Vue Router中，可以使用 beforeEach, beforeResolve, afterEach 等方法来设置这些守卫。

   例如，使用 beforeEach 来确认用户是否已经登录：

   javascript
   router.beforeEach((to, from, next) => {
       if (to.matched.some(record => record.meta.requiresAuth) && !authService.isLoggedIn()) {
           next({ path: '/login', query: { redirect: to.fullPath } });
       } else {
           next();
       }
   });

2. 路由独享的守卫（Per-Route Guards）: 这些守卫只会在使用它们的路由上运行。在路由配置中使用 beforeEnter 可以定义这样的守卫。

   举例来说，如果只有特定路由需要用户登录，你可以：

   javascript
   {
       path: '/secure',
       component: SecureComponent,
       beforeEnter: (to, from, next) => {
           if (!authService.isLoggedIn()) {
               next({ path: '/login', query: { redirect: to.fullPath } });
           } else {
               next();
           }
       }
   }

3. 组件内的守卫（In-Component Guards）: 这些守卫可以直接在Vue组件内部使用，如 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave。它们可以用来处理组件级的逻辑。

   例如，在用户离开组件前提示保存数据：

   javascript
   export default {
       data() {
           return {
               // Component data
           };
       },
       beforeRouteLeave(to, from, next) {
           if (this.unsavedChanges) {
               const answer = window.confirm('You have unsaved changes. Are you sure you want to leave?');
               if (answer) {
                   next();
               } else {
                   next(false);
               }
           } else {
               next();
           }
       }
   }

这三种守卫提供了灵活的方法来处理不同级别的路由跳转逻辑，帮助开发者构建更为复杂和用户友好的网页应用。