Vue路由守卫理解

全局守卫

vue-router全局有三个守卫：

1. router.beforeEach 全局前置守卫 进入路由之前
2. router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
3. router.afterEach 全局后置钩子 进入路由之后

用法：

    // main.js 入口文件
    // to和from是将要进入和将要离开的路由对象this.$route
    // next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。
    // 通过next()方法进行路由跳转
    import router from './router'; // 引入路由
    router.beforeEach((to, from, next) => { 
        // 通常用于常见的登录权限验证
        next();
    });
    router.beforeResolve((to, from, next) => {
      next();
    });
    router.afterEach((to, from) => {
      // 不能使用next()方法
      console.log('afterEach 全局后置钩子');
    });
    

路由独享守卫

    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => { 
            // 调用顺序在全局前置守卫后面，不会被全局守卫覆盖
            // ...
          }
        }
      ]
    })

路由组件内的守卫：

1. beforeRouteEnter 进入路由前
2. beforeRouteUpdate (2.2) 路由复用同一个组件时
3. beforeRouteLeave 离开当前路由时

用法：

  beforeRouteEnter (to, from, next) {
    // 在路由独享守卫后调用 不！能！获取组件实例 `this`，因为组件实例还没被创建
    ......
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 `this`
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    ......
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用，可以访问组件实例 `this`
    // 导航离开该组件的对应路由时调用，我们用它来禁止用户离开，
    // 比如还未保存草稿，或者在用户离开前，将setInterval销毁，防止离开之后，定时器还在调用。
    ......
  }