vue-router路由守卫详解

前言

在 Vue.js 中，Vue Router 提供了一系列的路由守卫（navigation guard），用于在路由切换过程中进行拦截和控制，以满足不同的业务需求。
Vue Router 的路由守卫主要分为三类：

• 全局路由守卫
• 路由独享守卫
• 组件内的守卫`

除了全局路由守卫之外，Vue Router 还提供了路由独享守卫和组件内的守卫。其中，路由独享守卫是针对某个具体的路由实例进行拦截和控制，而组件内的守卫则是针对某个具体的组件进行拦截和控制。

一、全局路由守卫

Vue Router 的全局路由守卫主要分为三类：

• 全局前置守卫（beforeEach）
• 全局解析守卫（beforeResolve）
• 全局后置守卫（afterEach）

全局前置守卫 beforeEach

全局前置守卫是 Vue Router 中最常用的路由守卫之一。它会在路由切换之前进行拦截和控制，以满足不同的业务需求。全局前置守卫的使用方法如下：

const router = new VueRouter({
  routes: [
    // ...
  ]
})
router.beforeEach((to, from, next) => {
  // ...
})

在全局前置守卫中，我们可以访问到即将要进入的路由对象 to，以及当前的路由对象 from。另外，还可以通过 next 函数控制路由的跳转行为。如果调用 next 函数并传入一个路由对象，则会跳转到该路由。如果不调用 next 函数，则当前路由不会发生变化。

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next()
  } else {
    if (isLogin()) {
      next()
    } else {
      next('/login')
    }
  }
})

在上面的例子中，我们判断了即将要进入的路由是否为登录页。如果是登录页，则直接跳转到该路由。如果不是登录页，则判断用户是否已经登录。如果已经登录，则跳转到该路由；如果未登录，则跳转到登录页。

全局解析守卫 beforeResolve

全局解析守卫是在路由解析之前进行拦截和控制的，它会在所有全局前置守卫 resolve 完成之后被调用。全局解析守卫的使用方法与全局前置守卫类似：

router.beforeResolve((to, from, next) => {
  // ...
})

在全局解析守卫中，我们同样可以访问到即将要进入的路由对象 to，以及当前的路由对象

全局后置守卫 afterEach

全局后置守卫 afterEach 会在每次路由跳转结束后被调用，无论是正常跳转还是取消跳转。它接收三个参数：
我们可以通过 afterEach 钩子做一些全局的收尾工作，例如埋点、页面滚动等操作。

router.afterEach((to, from) => {
  // 埋点
  trackPage(to.path)
  
  // 页面滚动到顶部
  window.scrollTo(0, 0)
})

需要注意的是，afterEach 钩子不像其他路由钩子一样，不能通过调用 next 函数来控制路由的跳转行为，因为此时路由跳转已经结束了。如果在 afterEach 钩子中调用 next 函数，则会抛出一个错误。

javascript
// 会抛出一个错误
router.afterEach((to, from, next) => {
  // ...
  next()
})

二、路由独享守卫 beforeEnter

路由独享守卫 beforeEnter
路由独享守卫是针对某个具体的路由实例进行拦截和控制。它和全局前置守卫的用法类似，只不过它是针对某个具体的路由实例而言的。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

在路由独享守卫中，我们同样可以访问到即将要进入的路由对象 to，以及当前的路由对象 from。另外，还可以通过 next 函数控制路由的跳转行为。如果调用 next 函数并传入一个路由对象，则会跳转到该路由。如果不调用 next 函数，则当前路由不会发生变化

三，组件内的守卫 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave

组件内的守卫是针对某个具体的组件进行拦截和控制。它分为三种：

• beforeRouteEnter: 在路由进入该组件之前被调用。
• beforeRouteUpdate: 在路由更新该组件时被调用。
• beforeRouteLeave: 在路由离开该组件时被调用。

这三个守卫的使用方法如下：

export default {
  beforeRouteEnter (to, from, next) {
    // ...
  },
  beforeRouteUpdate (to, from, next) {
    // ...
  },
  beforeRouteLeave (to, from, next) {
    // ...
  }
}

在组件内的守卫中，我们同样可以访问到即将要进入的路由对象 to，以及当前的路由对象 from。另外，还可以通过 next 函数控制路由的跳转行为。如果调用 next 函数并传入一个路由对象，则会跳转到该路由。如果不调用 next 函数，则当前路由不会发生变化。

需要注意的是，由于在 beforeRouteEnter 钩子中访问不到组件实例 this，所以在该钩子中无法访问到组件实例的数据和方法。如果需要访问组件实例的数据和方法，可以使用 next(vm => {}) 传入一个回调函数，在回调函数中访问组件实例。

export default {
  beforeRouteEnter (to, from, next) {
    next(vm => {
      console.log(vm.message)
    })
  }
}