vue路由守卫实际应用

Vue 路由守卫可以在路由导航过程中对路由进行拦截和控制，实现一些权限验证、登录验证等功能。它们分为三种类型：全局前置守卫、路由独享守卫和组件内的守卫。

1. 全局前置守卫：通过在路由实例上注册 `beforeEach` 方法来实现。在导航触发之前，该方法会被调用，可以进行一些全局的拦截和验证操作。

router.beforeEach((to, from, next) => {
  // 检查用户是否登录
  if (!isAuthenticated && to.path !== '/login') {
    next('/login');
  } else {
    next();
  }
});

2. 路由独享守卫：通过在路由配置中的 `beforeEnter` 字段定义一个函数来实现。该函数只会对当前路由生效。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 检查用户是否有管理员权限
        if (!isAdmin) {
          next('/login');
        } else {
          next();
        }
      }
    }
  ]
});

3. 组件内的守卫：通过在组件内定义 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 方法来实现。这些方法可以用于在组件内处理路由导航相关的逻辑。

export default {
  beforeRouteEnter(to, from, next) {
    // 在进入该路由前执行逻辑
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时执行逻辑
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在离开该路由前执行逻辑
    next();
  }
};

通过使用这些路由守卫，我们可以实现对路由的精确控制和验证，保证用户在访问不同页面时满足一定的条件要求。