vue-router的导航守卫

导航守卫（3种）

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

全局守卫（3种）

写在全局配置 route.js

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

路由独享守卫

如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫

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

路由组件内守卫（3种）

写在组件内的钩子函数

• beforeRouteEnter 进入路由前, 在路由独享守卫后调用 不能 获取组件实例 this，组件实例还没被创建
• beforeRouteUpdate (2.2) 路由复用同一个组件时, 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 this
• beforeRouteLeave 离开当前路由时, 导航离开该组件的对应路由时调用，可以访问组件实例 this