路由守卫：前置守卫和后置守卫

聚沙成塔·每天进步一点点

⭐ 专栏简介

Vue学习之旅的奇妙世界 欢迎大家来到 Vue 技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每篇文章都致力于提供清晰、深入的参考资料，让你能够更轻松、更自信地理解和掌握 Vue.js 的核心概念和技术。订阅这个专栏，让我们一同踏上更深入的 Vue学习之旅！为你的前端技能树添砖加瓦！

---

路由守卫：前置守卫和后置守卫

Vue Router 提供了路由守卫（Navigation Guards），用于在路由跳转前后执行一些逻辑操作，如权限验证、页面加载提示等。路由守卫分为前置守卫和后置守卫，它们分别在路由跳转前和路由跳转后执行。

1. 前置守卫

前置守卫用于在路由跳转前执行一些操作，例如进行权限验证或者页面加载提示。前置守卫可以阻止路由跳转，或者在跳转前执行一些异步操作。

使用方式

全局前置守卫

在 Vue Router 中，可以使用 router.beforeEach 注册全局前置守卫。

router.beforeEach((to, from, next) => {
  // 在路由跳转前执行的操作
  // 可以进行权限验证、页面加载提示等

  // 示例：权限验证
  if (!isAuthenticated()) {
    next('/login'); // 跳转到登录页
  } else {
    next(); // 继续路由跳转
  }
});

局部前置守卫

也可以在路由配置中使用 beforeEnter 注册局部前置守卫。

const routes = [
  {
    path: '/home',
    component: Home,
    beforeEnter: (to, from, next) => {
      // 在路由跳转前执行的操作
      // 可以进行权限验证、页面加载提示等

      // 示例：页面加载提示
      showLoadingIndicator();

      next(); // 继续路由跳转
    }
  }
];

2. 后置守卫

后置守卫用于在路由跳转后执行一些操作，例如页面的统计和日志记录等。后置守卫无法阻止路由跳转，只能在跳转后执行一些逻辑操作。

使用方式

全局后置守卫

在 Vue Router 中，可以使用 router.afterEach 注册全局后置守卫。

router.afterEach((to, from) => {
  // 在路由跳转后执行的操作
  // 可以进行页面的统计、日志记录等

  // 示例：页面统计
  trackPageView(to.path);
});

后置守卫没有局部注册的方式，只能注册全局后置守卫。

案例：路由跳转前后权限验证

// main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
});

// 全局前置守卫：权限验证
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

总结

• 前置守卫： 在路由跳转前执行，用于权限验证、页面加载提示等操作。
• 后置守卫： 在路由跳转后执行，用于页面统计、日志记录等操作。
• 使用路由守卫可以增强应用的控制和用户体验，使得路由跳转的过程更加灵活和可控。

---

⭐ 写在最后

欢迎来到《Vue技能树专栏》！本专栏旨在帮助您全面深入地掌握Vue.js，一款现代、灵活且强大的JavaScript框架。无论您是初学者还是有一定经验的开发者，这里都将为您提供详细的指导、实用的技巧以及深入的理解，助您在Vue.js世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正，我们一起进步，