全局守卫

beforeEach：进入路由前执行

router.beforeEach((to, from, next) => {
  // to  去哪个路由
  // from 从哪个路由来
  //  next 执行
})

beforeResolve：同为进入路由前执行

区别在于解析所有路由组件，一个在之前，一个在之后。

router.beforeResolve((to, from, next) => {
  next();
});

afterEach：路由完成后执行

router.afterEach((to, from) =>{
   //   没有Next参数
})

路由守卫（进入某个路由执行）

export default [
  {
    path: '/login',
    component: Login,
    name: 'login',
    // 进入Login页面前执行的钩子函数
    beforeEnter (to, from, next) {
      console.log("Loginroute before enter")
      next();
    },
  },
]

组件守卫（进入某组件执行）

beforeRouteEnter：进入组件时

beforeRouteEnter(to, from, next) {
    next(()=>{
    //next里面有一个回到函数可以获取到上下文，把请求到的数据塞到vue对象中
    });
  },

beforeRouteUpdate：路由不变，传递的参数改变

根据不同传入参数，显示不同内容
  beforeRouteUpdate(to, from, next){
    next();
  },

beforeRouteLeave： 离开组件前

 beforeRouteLeave(to, from, next){
   // 表单验证跳转时，是否确认跳转
  },