Vue Router 的路由守卫是什么

在 Vue.js 中，Vue Router 是一个用于构建单页面应用（SPA）的路由管理器。它允许开发者定义路由映射，并在用户导航到不同页面时动态加载相应的组件。为了在路由切换时执行一些逻辑操作，Vue Router 提供了路由守卫（Route Guards）功能。路由守卫允许开发者在路由导航过程中插入自定义逻辑，例如权限验证、数据预加载、页面跳转前的确认等。

路由守卫的类型

Vue Router 提供了多种类型的路由守卫，它们分别在路由导航的不同阶段执行。以下是常见的路由守卫类型：

1. 全局前置守卫（Global Before Guards）

   • beforeEach: 在路由导航开始之前执行。通常用于全局的权限验证或页面跳转前的确认。
   • beforeResolve: 在导航被确认之前执行，且在组件内守卫和异步路由组件被解析之后。

2. 全局后置钩子（Global After Hooks）

   • afterEach: 在路由导航完成后执行。通常用于日志记录或页面加载后的操作。

3. 路由独享的守卫（Per-Route Guards）

   • beforeEnter: 在进入特定路由之前执行。可以用于特定路由的权限验证或数据预加载。

4. 组件内的守卫（In-Component Guards）

   • beforeRouteEnter: 在路由进入组件之前执行。此时组件实例尚未创建，因此无法访问 this。
   • beforeRouteUpdate: 在当前路由改变，但该组件被复用时执行。例如，在 /user/:id 路由中，当 id 发生变化时，组件会被复用。
   • beforeRouteLeave: 在离开当前路由之前执行。通常用于提示用户保存未保存的更改或确认离开。

路由守卫的使用场景

1. 权限验证 在用户访问某些需要权限的页面时，可以通过 beforeEach 或 beforeEnter 守卫来检查用户是否具有访问权限。如果没有权限，可以重定向到登录页面或其他页面。

2. 数据预加载 在进入某个路由之前，可能需要预先加载一些数据。可以在 beforeRouteEnter 或 beforeEnter 守卫中发起异步请求，并在数据加载完成后再进入路由。

3. 页面跳转前的确认 当用户在表单页面输入了数据但未保存时，可以通过 beforeRouteLeave 守卫提示用户是否确认离开当前页面。

4. 日志记录 在 afterEach 守卫中可以记录用户的导航行为，用于分析用户行为或调试。

示例代码

以下是一个简单的示例，展示了如何使用不同类型的路由守卫：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Admin from './components/Admin.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 检查用户权限
        const isAdmin = checkUserRole();
        if (isAdmin) {
          next();
        } else {
          next('/');
        }
      }
    }
  ]
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  console.log(`Navigating from ${from.path} to ${to.path}`);
  next();
});

// 全局后置钩子
router.afterEach((to, from) => {
  console.log(`Navigation to ${to.path} completed`);
});

// 组件内守卫
const AdminComponent = {
  template: '<div>Admin Page</div>',
  beforeRouteEnter(to, from, next) {
    // 组件实例尚未创建，无法访问 this
    next(vm => {
      // 通过 `vm` 访问组件实例
      console.log('Admin component is about to be rendered');
    });
  },
  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('Do you really want to leave?');
    if (answer) {
      next();
    } else {
      next(false);
    }
  }
};

export default router;

总结

Vue Router 的路由守卫为开发者提供了在路由导航过程中执行自定义逻辑的能力。通过合理使用路由守卫，可以实现权限验证、数据预加载、页面跳转前的确认等功能，从而提升应用的用户体验和安全性。掌握路由守卫的使用是开发复杂 Vue.js 应用的重要技能之一。