路由守卫的几种方法、全局守卫、路由独享守卫、组件内部守卫

路由独享守卫，守的是path
组件内部守卫，守的是component

全局守卫

// src/router/index.js

1.前置钩子

router.beforeEach((to, from, next) => { 
 	 //	to: 目标路由
 	 //	from: 当前路由  
 	 // next() 跳转  一定要调用
  next(false);//不让走
  next(true);//继续前行
  next('/login')//走哪
  next({path:'/detail/2',params:{},query:{}})//带点货
  
  // 守卫业务
  if(to.path=='/login' || to.path=='/reg' ){    
    next(true)
  }else{
      //是否登录的判断
      if(没有登录过){
          next('/login');
       }else{
          next(true);
       }
  }
})

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

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

路由独享守卫

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

组件内部守卫

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