vue-router的路由守卫

Vue Router 的路由守卫（Navigation Guards）用于控制路由导航的过程，可在路由跳转前、跳转后或取消跳转时执行特定逻辑，常用于权限验证、登录检查、页面跳转控制等场景。

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

一、全局守卫

全局守卫作用于所有路由，定义在路由实例上，常用的有以下三种：

1. beforeEach - 路由跳转前触发

在路由即将跳转前执行，可用于登录验证、权限检查等。

javascript

运行

import {
   
    createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
   
   
  history: createWebHistory(),
  routes: [/* 路由配置 */]
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
   
   
  // to: 即将进入的目标路由对象
  // from: 当前正要离开的路由对象
  // next: 函数，控制是否继续跳转（必选）
  
  // 示例：未登录时跳转到登录页
  const isLogin = localStorage.getItem('token');
  if (to.meta.requiresAuth && !isLogin) {
   
   
    // 需要登录但未登录，跳转到登录页
    next('/login');
  } else {
   
   
    // 允许跳转
    next();
  }
});

next() 的用法：

• next()：继续执行跳转
• next(false)：取消跳转
• next('/path') 或 next({ path: '/path' })：跳转到指定路由
• next(error)：传递错误（需配合 onError 捕获）

2. afterEach - 路由跳转后触发

在路由跳转完成后执行，常用于页面标题设置、统计分析等。

javascript

运行

// 全局后置守卫
router.afterEach((to, from) => {
   
   
  // 示例：设置页面标题
  if (to.meta.title)