Vue Router 路由守卫学习指南

Vue Router 提供了 路由守卫（Navigation Guards）来控制路由导航的行为。这些守卫可以用于在路由跳转之前、跳转之后或路由离开时，执行某些操作，比如验证用户身份、权限控制、数据加载等。

Vue Router 路由守卫的分类

1. 全局守卫：

   • beforeEach：在每次路由跳转之前触发。
   • afterEach：在每次路由跳转之后触发。

2. 路由独享守卫：

   • beforeEnter：用于路由配置时指定的守卫，只有在该路由被访问时才触发。

3. 组件内守卫：

   • beforeRouteEnter：在路由进入前触发，beforeRouteEnter 不会访问组件实例，因此不能访问 this。
   • beforeRouteUpdate：当路由参数变化时，组件重渲染之前触发。
   • beforeRouteLeave：在路由离开前触发，通常用于保存离开前的数据或进行确认。

1. 全局守卫

beforeEach

beforeEach 是一个全局路由守卫，在每次路由跳转之前执行。它接收三个参数：

• to：即将进入的目标路由对象。
• from：当前导航即将离开的路由对象。
• next：调用该函数来决定路由是否继续。

// 全局守卫
const router = new VueRouter({
  routes: [
    // 路由配置
  ]
});
 
router.beforeEach((to, from, next) => {
  // 路由跳转前的逻辑，比如验证用户是否登录
  if (to.meta.requiresAuth && !isUserLoggedIn()) {
    next('/login');  // 跳转到登录页面
  } else {
    next();  // 必须调用 next() 才能继续路由跳转
  }
});

afterEach

afterEach 是全局守卫，在每次路由跳转之后执行，不能更改导航（即不能使用 next()）。

router.afterEach((to, from) => {
  // 路由跳转后的逻辑，比如页面统计，日志记录等
  console.log(`Navigated from ${from.path} to ${to.path}`);
});

2. 路由独享守卫

beforeEnter

beforeEnter 允许你为特定路由设置守卫，只有当该路由被访问时才会执行。它在路由配置对象内定义。

const routes = [
  {
    path: '/protected',
    component: ProtectedComponent,
    beforeEnter: (to, from, next) => {
      if (!isUserLoggedIn()) {
        next('/login');  // 跳转到登录页面
      } else {
        next();  // 继续导航
      }
    }
  }
];

3. 组件内守卫

beforeRouteEnter

beforeRouteEnter 在组件被创建之前执行，因此无法访问组件实例 this，但是可以通过 next 函数的回调访问组件实例。

export default {
  beforeRouteEnter(to, from, next) {
    // 进入该路由之前的逻辑
    next(vm => {
      // vm 是组件实例
      console.log('Component instance:', vm);
    });
  }
}

beforeRouteUpdate

当路由参数变化时（如通过动态路由跳转），beforeRouteUpdate 会在组件重新渲染之前调用。

export default {
  beforeRouteUpdate(to, from, next) {
    // 当路由更新时触发
    console.log('Route parameters changed');
    next();
  }
}

beforeRouteLeave

beforeRouteLeave 在离开当前路由时触发，通常用于数据保存或用户确认是否离开当前页面（例如表单未保存的情况）。

export default {
  beforeRouteLeave(to, from, next) {
    // 离开当前路由前的逻辑，比如提示是否保存
    const answer = window.confirm('Do you really want to leave?');
    if (answer) {
      next();  // 允许离开
    } else {
      next(false);  // 取消离开
    }
  }
}

路由守卫的顺序

• 全局前置守卫 (beforeEach) 会先于路由独享守卫和组件内守卫触发。
• 路由独享守卫 (beforeEnter) 紧接其后，只对特定路由有效。
• 组件内守卫 (beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave) 会在组件生命周期的适当时刻触发。
• 全局后置守卫 (afterEach) 会在所有的守卫执行完后执行。

总结

• 全局守卫 用于全局处理路由跳转前后的逻辑，如用户认证等。
• 路由独享守卫 在特定路由的配置中定义，可以为某个特定路由添加守卫。
• 组件内守卫 在组件内部定义，适用于处理组件生命周期相关的导航逻辑，如路由参数变化、组件离开时的清理操作等。

路由守卫在控制导航行为、权限校验、数据预加载等方面非常有用。