Vue中如何实现路由守卫？

在Vue Router中，路由守卫是一系列在路由导航发生前、发生时和发生后执行的钩子函数。它们主要用于控制导航权限（如登录验证）、管理数据获取（如预加载数据）或处理页面生命周期。根据作用范围，路由守卫可分为全局守卫、路由独享守卫和组件内守卫。

全局守卫

全局守卫作用于所有路由导航，是最常用的权限控制点。主要有三个：beforeEach、beforeResolve和afterEach。

// router/index.js
import { createRouter } from 'vue-router';
const router = createRouter({ ... });

// 全局前置守卫：在导航触发前调用，常用于验证登录状态
router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth();
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login'); // 重定向到登录页
  } else {
    next(); // 放行
  }
});

// 全局解析守卫：在导航被确认前，组件被解析后调用
router.beforeResolve((to, from) => {
  // 适合做最后的权限校验或数据预加载确认
});

// 全局后置钩子：导航完成后调用，无 next 函数，常用于页面分析或标题设置
router.afterEach((to, from) => {
  document.title = to.meta.title || '默认标题';
});

beforeEach和beforeResolve接收to、from和next三个参数。必须调用next()来继续或中断导航。

路由独享守卫

你可以在路由配置中直接定义beforeEnter守卫，它只对当前路由生效。

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

这种守卫适合对特定路由进行精细化的访问控制。

组件内守卫

在组件内部，你可以通过选项式API或组合式API定义守卫。

<script>
// 选项式API
export default {
  beforeRouteEnter(to, from, next) {
    // 在组件实例创建前调用，无法访问 this
    next(vm => {
      console.log(vm); // 通过回调访问组件实例
    });
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但组件被复用时调用，可以访问 this
    this.fetchData(to.params.id);
  },
  beforeRouteLeave(to, from) {
    // 在离开该组件的对应路由时调用，可用于防止未保存离开
    const answer = confirm('有未保存的更改，确定离开吗？');
    if (!answer) return false; // 取消导航
  }
}
</script>

在组合式API的setup中，需使用onBeforeRouteUpdate和onBeforeRouteLeave函数（beforeRouteEnter无对应组合式API）。

<script setup>
import { onBeforeRouteLeave } from 'vue-router';
onBeforeRouteLeave((to, from) => {
  return confirm('确定离开吗？');
});
</script>

路由守卫的执行顺序是：beforeRouteLeave（组件） -> beforeEach（全局） -> beforeEnter（路由） -> beforeRouteEnter（组件） -> beforeResolve（全局） -> afterEach（全局）。合理运用它们能构建出安全、可控的单页应用导航流程。