vue-router 导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
路由守卫钩子：
全局前置守卫：

  router.beforeEach // 全局前置守卫 全局前置守卫用于在路由配置生效之前进行一些动作
  //使用方法：
  router.beforeEach((to, from, next) => {
  // to: Route: 即将要进入的目标 路由对象,
  //from: Route: 当前导航正要离开的路由,
  //next() :放行执行下一步
})

全局后置钩子：

  router.afterEach// 全局前置守卫 全局前置守卫用于在路由配置生效之前进行一些动作
  //使用方法：
  router.afterEach((to, from) => {
   // 不用执行next（）
})

路由独享的守卫：

 beforeEnter//  路由独享的守卫  可以在路由配置上直接定义 beforeEnter 守卫
 //使用方法:
  {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }

组件内的守卫

    router.beforeRouteEnter //页面渲染前调用
    router.beforeRouteLeave // 导航离开该组件的对应路由时调用
    router.beforeRouteUpdate  //在当前路由改变时调用  接口请求
    //执行方法：
       router.beforeRouteEnter((to, from, next) => {
  // to: Route: 即将要进入的目标 路由对象,
  //from: Route: 当前导航正要离开的路由,
  //next() :放行执行下一步
})

路由守卫执行顺序