Vue路由守卫详解

Vue 路由守卫是 Vue Router 提供的一种功能，用于在路由导航的不同阶段插入控制逻辑，从而实现对路由跳转的精细化管理。以下是 Vue 路由守卫的详细解析：

路由守卫的分类

Vue 路由守卫主要分为三类：全局守卫、路由独享守卫和组件内守卫。

1. 全局守卫

全局守卫对整个应用中的所有路由跳转生效，主要包括以下几种：

• 全局前置守卫 (beforeEach)：在路由跳转之前被调用，可以用于身份验证、权限检查等。例如，检查用户是否登录，如果未登录则重定向到登录页面。

router.beforeEach((to, from, next) => {
   
  const isAuthenticated = localStorage.getItem('token');
  if (to.meta.requiresAuth && !isAuthenticated) {
   
    next('/login');
  } else {
   
    next();
  }
});

• 每个守卫接收两个（或三个）参数：
  to：即将要进入的目标
  from：当前导航正要离开的路由
  next：（可选）一个继续执行的函数

• 可以返回的值如下：
  false：取消当前的导航
  一个路由地址：通过一个路由地址重定向到一个不同的地址，如同调用router.push()，并且可以传入类似“replace：true” 或 “name：home” 之类的选项

 
  router.beforeEach(async (to,