vue路由守卫

我们都知道vue的路由守卫有
全局路由守卫
单个独享路由守卫
组件路由守卫

在平时我们一般主要使用的都是全局的路由守卫，他里边有

• 全局前置守卫 router.beforeEach
• 全局解析守卫router.beforeResolve
• 全局后置钩子router.afterEach

全局前置守卫

首先我们注册一个全局前置守卫

const router = new VueRouter({ ... })

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

这里的 to, from, next， 所有守卫都是这三个参数
to 代表即将进入的路由
from 代表要离开的路由
next 钩子函数 ，当 next()时代表可以直接跳转
next（false）如果传入false代表不允许通过
当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象
next（{path：“/”}）可以在里边写要跳转的地址
一般应用在用户未能验证身份时重定向到 /login ：

全局解析守卫

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

全局后置钩子
注意：后置钩子afterEach没有next参数

在路由跳转完成后触发，参数包括to,from，它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。

路由独享守卫

这个守卫是写在路由里面的，只有当进入这个路由时才会调用的，这些守卫与全局前置守卫的方法参数是一样的。

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

组件内部的路由守卫

可以在路由组件内直接定义以下路由导航守卫：

• 进组组件前的守卫 beforeRouteEnter
• 路由更新时的守卫 beforeRouteUpdate (2.2 新增)
• 离开组件时的守卫 beforeRouteLeave

这三个守卫是写在组件里，beforeRouteEnter守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。其他两个都可以用this

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 对应渲染该组件的路由被 confirm 前调用
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
  }
}