vue-router守卫方式

Vue Router 提供了多种守卫方式，可以用来控制路由跳转的行为。以下是常用的几种守卫方式：

1. 全局前置守卫（beforeEach）：在路由跳转之前执行，可以用来做登录验证、权限控制等操作。

2. 全局后置守卫（afterEach）：在路由跳转之后执行，可以用来做页面统计、错误处理等操作。

3. 路由独享的守卫（beforeEnter）：只有特定的路由才会执行，可以用来做特殊路由的权限控制。

4. 组件内的守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）：只有某个组件加载或者离开时才会执行，可以用来做组件内部的业务逻辑控制。

以上几种守卫方式都是在路由跳转时执行的，可以通过 next() 方法来控制路由跳转的行为。next() 方法可以传入一个参数，用来指定路由跳转的目标地址。如果不传入参数，就会按照默认行为跳转到目标地址。如果传入 false，就会取消路由跳转。

这些守卫方式可以在 Vue Router 的路由配置中使用。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      meta: { requiresAuth: true } // 需要登录才能访问
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/profile',
      component: Profile,
      beforeEnter: (to, from, next) => {
        if (isLoggedIn()) {
          next()
        } else {
          next('/login')
        }
      }
    },
    {
      path: '/user/:id',
      component: User,
      beforeRouteUpdate(to, from, next) {
        // ...
      },
      beforeRouteLeave(to, from, next) {
        // ...
      }
    }
  ]
})