vue导航守卫

• 全局路由守卫，例子说明：
  
  

router.beforeEach((to, from, next) =>{
  console.log(to, 'this is to')
  console.log(from, 'this is from')
  console.log(next, 'this is next')
})

这样配置后进入初始页面后无法跳转，原因稍后分析，先看打印出来的结果
* to： 表示跳转的目标，包含路由配置的信息，如name, mata, path等
* from: 表示从哪里跳转的，也包括了路由的相关信息。
* next： 用于是否跳转，如果不写，默认不会跳转进入下一个路由地址，也可以在参数中配置跳转的信息，跳转地址等。

• 因此可知，页面在初始页面，是因为没有使用next让路由进行跳转，直接被拦截下来了。重定向也没法跳转，如果想要跳转，需要在全局路由中使用next()即可。如果判断的时候不合理，经常会导致页面的死循环（主要发生在全局路由守卫的无限跳转）。
• beforeEach：主要参数为to, from. next, 进入下一个路由前的守卫，可以进行权限判断，状态判断，是否可以跳转还是重定向到登录页面等。
• afterEach：全局后置钩子，不会接收next函数，进入下一个路由后相关逻辑等可以在这里进行。它触发的时间是早于函数组件被创造的声明周期。
• 组件内的守卫：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave三个钩子函数。参数都是to, from, next。
  • beforeRouteEnter：进入组件前执行，早于组件的声明周期，无法调用this，里面的this是undefined，这是由于组件还未创建相关的实例。可以在next中来访问相关实例，如next(x => x//这里的x就是对应的实例)。beforeRouteEnter 是支持给 next 传递回调的唯一守卫
  • beforeRouteUpdate: 当前路由改变，但是组件被复用的时候调用，可以访问this。
  • beforeRouteLeave:这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
• 独享路由守卫：beforeEnter，再路由配置文件夹中进行定义。
• 各类路由钩子的顺序：全局beforeEach>独享beforeEnter>组件内beforeRouteEnter>全局afterEach