vue 路由守卫-beforeEach

router.beforeEach 是 Vue Router 中用于实现全局路由守卫的核心方法，主要用于在路由跳转前执行特定逻辑（如权限验证、数据加载等），从而控制导航行为。以下是其使用和原理的清晰说明：

一、核心作用

1. 路由拦截：通过 router.beforeEach 可以拦截所有路由跳转请求，并在跳转前进行条件判断[4]。
   • 例如：未登录用户尝试访问受限页面时，强制跳转到登录页[1][4]。
2. 权限控制：根据用户角色或权限动态决定是否允许访问目标路由[1][5]。
3. 统一逻辑处理：集中管理路由跳转前的公共逻辑（如页面标题修改、埋点统计等）[3][5]。

二、基本用法

1. 注册全局守卫
   在 Vue Router 实例上调用 beforeEach，传入一个包含 to、from、next 参数的函数：

   router.beforeEach((to, from, next) => {
     // 逻辑处理
     next(); // 必须调用 next() 才能继续导航
   });
   

   • 参数说明：
     • to：目标路由对象（即将进入的路由信息）[2]。
     • from：当前路由对象（正要离开的路由信息）[2]。
     • next：控制导航行为的函数，需显式调用以下之一：
       • next()：允许跳转。
       • next(false)：中断当前导航。
       • next('/login')：重定向到指定路径[2][4]。

2. 典型场景示例

   • 登录验证：

     if (to.meta.requiresAuth && !isLoggedIn) {
       next('/login'); // 未登录则跳转
     } else {
       next();
     }
     

     参考：通过检查用户登录状态和路由元信息实现权限控制[1][4]。
   • 动态权限：结合 Vuex 中的用户角色信息，验证用户是否有访问权限[1][5]。

三、工作原理

1. 执行时机
   beforeEach 属于全局前置守卫，在路由跳转被触发时，最先被调用[2]。Vue Router 的导航解析流程如下：

   触发导航 → 调用全局守卫 → 调用路由独享守卫 → 调用组件内守卫 → 渲染目标组件
   

2. 阻塞式逻辑

   • 守卫函数中的代码会阻塞导航，直到 next() 被调用。
   • 若未调用 next()，页面会处于“悬停”状态，无法跳转[2][5]。

3. 链式调用
   支持注册多个 beforeEach 守卫，按注册顺序依次执行，类似中间件机制[3][5]。

四、应用场景

1. 登录状态验证（如未登录跳转至登录页）[1][4]。
2. 动态权限控制（如管理员与普通用户的路由隔离）[1][5]。
3. 数据预加载：在跳转前预先请求页面所需数据[3]。
4. 路由埋点：统计页面访问路径和停留时长[3][5]。

通过合理使用 router.beforeEach，开发者可以高效管理路由跳转的前置逻辑，提升应用的安全性和用户体验[5]。