一文详解Vue导航守卫未生效问题：为什么路由守卫不执行或逻辑失效？

// router/index.js
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    // ❌ 忘记调用 next(false) 或 next('/login')
    // 守卫卡住，页面无法跳转
  }
  // ❌ 也忘记调用 next() 的成功分支
});

<script>
export default {
  // ❌ 错误：将守卫写在 methods 中
  methods: {
    beforeRouteEnter(to, from, next) {
      console.log('不会执行！');
      next();
    }
  }
};
</script>

router.beforeEach(async (to, from, next) => {
  const user = await fetchUser(); // 异步获取用户信息
  if (user.role !== 'admin') {
    next('/forbidden');
  }
  next(); // ❌ 在条件判断外重复调用 next()
});

// router/index.js
const routes = [
  {
    path: '/admin',
    component: Admin,
    // ❌ 忘记添加 beforeEnter 守卫
  }
];

// 单独定义但未关联
function adminGuard(to, from, next) {
  if (!isAdmin()) next('/login');
  else next();
}

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (isAuthenticated()) {
      next(); // 允许访问
    } else {
      next('/login'); // 重定向到登录页
    }
  } else {
    next(); // 无需认证，直接放行
  }
});

<script>
export default {
  // ✅ 正确：直接定义在组件选项中
  beforeRouteEnter(to, from, next) {
    // 注意：此处不能访问 this（组件实例未创建）
    next(vm => {
      // vm 是组件实例，可在此设置数据
      vm.loadData();
    });
  },

  beforeRouteUpdate(to, from, next) {
    // 可访问 this
    this.fetchData(to.params.id);
    next();
  },

  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('离开页面将丢失未保存内容');
    if (answer) {
      next();
    } else {
      next(false); // 取消导航
    }
  }
};
</script>

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      if (isAdmin()) {
        next();
      } else {
        next('/unauthorized');
      }
    }
  }
];

router.beforeEach(async (to, from, next) => {
  try {
    const user = await getCurrentUser();
    
    if (to.meta.requiresAdmin && user.role !== 'admin') {
      next('/forbidden');
      return; // 避免后续代码执行
    }
    
    next();
  } catch (error) {
    console.error('Auth check failed:', error);
    next('/error');
  }
});

全局 beforeEach → 路由独享 beforeEnter → 组件内 beforeRouteLeave → 
解析异步路由 → 组件内 beforeRouteUpdate / beforeRouteEnter → 
全局 beforeResolve → 导航确认 → 全局 afterEach