vue Router 路由守卫

路由守卫 是什么 ：

简单来说，导航守卫就是路由跳转前、中、后过程中的一些钩子函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。

---

全局守卫

指路由实例上直接操作的钩子函数，他的特点是所有配置路由的组件都会触发

全局路由的钩子函数包括

beforeEach
在路由跳转前触发，参数包括to,from,next（参数会单独介绍）三个，这个钩子作用主要是用于登录验证
beforeResolve
这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，与beforeEach的区别参考官网。
afterEach
是在路由跳转完成后触发，参数包括to,from，它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。

例如：

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

---

独享守卫

指在单个路由配置的时候也可以设置的钩子函数

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

函数里面的参数有 to, from ,next

---

组件内守卫

指在组件内执行的钩子函数，类似于组件内的生命周期

<template>
</template>
export default{
  //进入该组件之前被调用，组件实例还没有被创建，不能使用 this关键字
  beforeRouteEnter (to, from, next) {
  },
  //离开组件之后调用，可以调用 this 关键字
  beforeRouteUpdate (to, from, next) {
  },
  // 该组件被复用时调用，可以调用 this 关键字
  beforeRouteLeave (to, from, next) {
  }
｝ 
  

---

to from next

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。