Vue路由守卫的三种方式，及其钩子函数和参数

1）、全局守卫

全局守卫有前置守卫和后置守卫，是vueRouter对象的两个钩子函数，分别是 beforeEach和afterEach。
​
前置守卫：

router.beforeEach((to, from, next) => {
    //  to: 目标路由
    //  from: 当前路由
​
    // next() 跳转  一定要调用
    next(false);//不让走
    next(true);//继续前行
    next('/login')//走哪
    next({path:'/detail/2',params:{},query:{}})//带点货
 }

后置守卫：

router.afterEach((to,from)=>{
   //全局后置守卫业务
})

如果能够回答上过程，肯定有加分：

//过程： 1、请求一个路径：如：/Index 2、经历前置守卫 决定了能去哪个路径 3、根据去的路径，找对应component（路由配置） 4、经过后置守卫 5、创建组件

2）、路由独享守卫

写在路由配置里。钩子函数名：beforeEnter，只有前置守卫

如：

// src/router/index.js
{
  path: '/user',
  component: User,
  beforeEnter: (to,from,next)=>{ //路由独享守卫 前置 
    console.log('路由独享守卫');
    if(Math.random()<.5){
      next()
    }else{
      next('/login')
    }
   }
 }

3）、组件内部守卫

写在组件对象里。分别有前置守卫，后置守卫，路由改变守卫（当前组件被复用的情况,不是路径改变）三个钩子函数。

export default{
    data(){return {}}
  ……………………  
​
    //组件内部钩子
    beforeRouteEnter (to, from, next) {//前置
      // 不！能！获取组件实例 `this`
      // 因为当守卫执行前，组件实例还没被创建
    },
    beforeRouteUpdate (to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
    beforeRouteLeave (to, from, next) {//后置
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    }
}