Vue Router 路由守卫有哪些？

Vue Router 路由守卫主要有三种：全局守卫、路由独享守卫和组件内守卫。

1. 全局守卫：beforeEach、afterEach、beforeResolve
2. 路由独享守卫：beforeEnter
3. 组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

相关问题

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
    }
  ]
});

vue-router如何做路由守卫?

Vue Router 提供了路由守卫 (Navigation Guards) 用于在路由发生变化前，进行身份验证、权限验证等操作。

Vue Router 提供了三种类型的路由守卫：

1. 全局守卫：影响全局路由，在路由进入/离开时触发
2. 路由独享守卫：影响单个路由，在路由进入/离开时触发
3. 组件内守卫：影响单个组件，在组件进入/销毁时触发

下面是一个使用全局守卫的例子：

router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  const isLogin = localStorage.getItem('token') ? true : false;
  if (to.path === '/login') {
    // 如果已登录，跳转到首页
    isLogin ? next('/') : next();
  } else {
    // 如果未登录，跳转到登录页
    isLogin ? next() : next('/login');
  }
});

在这个例子中，`beforeEach` 路由守卫会在每个路由进入前触发。在这个守卫中，我们判断用户是否登录，如果未登录，则跳转到登录页，否则让用户继续访问页面。

除了 `beforeEach`，Vue Router 还提供了 `beforeResolve` (在路由解析完成后触发) 和 `afterEach` (在路由离开后触发) 守卫，可以根据具体业务需求来选择使用。