vue router路由守卫

Vue Router 提供了一套强大的导航守卫（Guard）系统，这些守卫可以在路由变化之前或之后执行自定义操作，允许开发者拦截、验证、修改或重定向路由过程。路由守卫主要分为以下几种类型：

1. **全局守卫** (Global Guards)：
- **beforeEach**: 在每次导航尝试之前被调用，可以阻止导航、改变目标URL或者提供一些默认参数。
- ** afterEach**: 在每次导航完成后被调用，无论是否发生导航失败。

2. **路由级守卫** (Route Guards):
- **beforeEnter**: 只在进入特定路由时触发，用于验证或处理进入该路由的权限或状态。
- **enter**: 类似于beforeEnter，但它是异步的，因此可以用它来做一些需要时间的操作，如数据请求。
- **afterEnter**: 在进入路由并完成渲染后执行。
- **beforeLeave**: 当离开当前路由时触发，可以用来确认离开操作。
- **leave**: 异步的离开守卫，类似`afterEnter`。

3. **导航失败守卫** (Navigation Failure Guards)：
- **catch**: 当导航失败（例如，未找到匹配的路由）时触发。

你可以使用这些守卫来实现各种功能，比如身份验证、数据加载、错误处理等。为了更好地利用它们，你需要在Vue实例的`router.options`中配置守卫，或者在每个具体的路由对象上设置。例如：

// 全局守卫示例
router.beforeEach((to, from, next) => {
  // 检查用户是否已登录
  if (!isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

// 路由级守卫示例
const router = new VueRouter({
  routes: [
    {
      path: '/private',
      component: PrivateComponent,
      beforeEnter: authenticateUser
    }
  ]
});