Vue Router 路由守卫：beforeEach vs beforeRouteEnter

Vue Router 路由守卫：beforeEach vs beforeRouteEnter

一、全局前置守卫 beforeEach

1. 核心作用
   在所有路由跳转前 执行，用于全局拦截逻辑（如权限校验、登录验证）。
2. 代码示例

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

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

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 1. 判断目标路由是否需要登录
  if (to.meta.requiresAuth) {
    // 2. 检查用户是否已登录
    const token = localStorage.getItem('token');
    if (!token) {
      // 未登录，重定向到登录页
      next({ path: '/login', query: { redirect: to.fullPath } });
    } else {
      // 已登录，允许访问
      next();
    }
  } else {
    next();
  }
});

3. 关键特性

特性	描述
触发时机	所有路由跳转前（包括同一路径的复用）
访问组件实例	❌ 无（无法通过 this 访问组件）
典型场景	登录校验、权限控制、页面埋点统计

二、组件内守卫 beforeRouteEnter

1. 核心作用
   在 进入特定组件前 执行，用于组件级数据预加载或状态初始化。
2. 代码示例

// UserProfile.vue
<template>
  <div>
    <h1>{{ user.name }}</h1>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: null
    };
  },
  beforeRouteEnter(to, from, next) {
    // 1. 根据路由参数获取用户ID
    const userId = to.params.id;
    
    // 2. 发起API请求
    axios.get(`/api/users/${userId}`).then(response => {
      // 3. 通过回调函数将数据传递给组件实例
      next(vm => {
        vm.user = response.data;
      });
    }).catch(error => {
      // 4. 请求失败则取消导航
      next(false);
    });
  }
};
</script>

3. 关键特性

特性	描述
触发时机	仅首次进入该组件对应的路由时触发（组件复用时不触发）
访问组件实例	✅ 通过 next(vm => { … }) 访问组件实例
典型场景	数据预加载、动态路由参数初始化、组件状态依赖路由参数

三、两者对比表

对比项	beforeEach	beforeRouteEnter
触发时机	仅首次进入该组件对应的路由时触发（组件复用时不触发）
访问组件实例	✅ 通过 next(vm => { … }) 访问组件实例
典型场景	数据预加载、动态路由参数初始化、组件状态依赖路由参数

四、执行流程示意图

五、最佳实践指南

1. 选择原则

• 优先用 beforeEach：处理全局通用逻辑（如登录校验）
• 使用 beforeRouteEnter：处理组件依赖的路由参数（如用户ID）

2. 注意事项

• 必调用 next()：否则会导致路由卡死
• 异步操作处理：

// 正确写法
beforeRouteEnter(to, from, next) {
  setTimeout(() => {
    next();
  }, 1000);
}

// 错误写法（会导致死循环）
beforeRouteEnter(to, from, next) {
  next();
}

3. 组件复用场景：

• 复用组件时不会触发 beforeRouteEnter
• 需要监听参数变化时改用 beforeRouteUpdate

六、延伸学习

1. Vue Router 官方文档