vue2路由守卫用法

Vue 2 的路由守卫有三种：全局前置守卫、全局后置钩子和组件内的路由守卫。下面我会分别介绍它们的用法。

1. 全局前置守卫：
全局前置守卫通过在路由实例上注册一个回调函数来实现。在每次导航触发前，守卫会按照创建顺序依次被调用。

router.beforeEach((to, from, next) => {
  // 在这里进行判断逻辑，决定是否允许导航
  if (to.meta.requiresAuth && !isLoggedIn()) {
    // 如果需要登录且用户未登录，则跳转到登录页面
    next('/login');
  } else {
    // 允许导航
    next();
  }
});

2. 全局后置钩子：
全局后置钩子通过在路由实例上注册一个回调函数来实现。在每次导航触发后被调用，不会接收到 next 函数。

router.afterEach((to, from) => {
  // 在这里可以进行一些后续操作，如页面统计等
});

3. 组件内的路由守卫：
组件内的路由守卫是在组件内部通过路由配置对象的 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 字段来定义的。

const Foo = {
  template: '...',
  beforeRouteEnter(to, from, next) {
    // 在进入路由前被调用
    // 可以在这里获取组件实例 `this`
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在路由更新前被调用
    // 可以访问组件实例 `this`
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在离开路由前被调用
    // 可以访问组件实例 `this`
    next();
  }
};

以上就是 Vue 2 的路由守卫的用法。希望对你有所帮助！如有疑问，请继续提问。