关于路由守卫

173 阅读1分钟

就是路由跳转过程中的一些钩子函数,类似于组件生命周期钩子函数

全局守卫

  1. 在路由实例上直接操作的钩子函数
  2. 特点:触发路由就会触发这些钩子函数
    • beforeEach(to,from,next)
      • 在路由跳转之前触发,主要用于登录验证
    • beforeResolve(to,from,next)
      • 和beforeEach类似,也是跳转前触发,区别是在beforeEach和组件内beforeRouteEnter之后,afterEach之前调用
    • afterEach(to,from,next)
      • 路由跳转之后触发

路由守卫

  1. 单个路由配置的时候设置的钩子函数
    • beforeEnter(to,from,next)
      • 同样是路由跳转前触发,如果同beforeEach一起设置了,则在beforeEach之后调用
  2. 路由守卫是在路由配置上直接定义的

组件守卫

  1. 组件内执行的钩子函数,类似组件内的生命周期,相当于为配置路由的组件添加生命周期钩子函数
    • beforeRouterEnter(to,from,next)
      • 该钩子函数在beforeEach和beforeEnter之后,beforeResolve和afterEach之前调用,该守卫访问不到组件实例,因为他在组件生命周期beforeCreate阶段触发,此时组件还未创建
    • beforeRouterUpdate(to,from,next)
      • 当前路由改变时,且该组件被复用时调用,可以通过this访问实例
    • beforeRouterLeave(to,from,next)
      • 路由离开该组件的对应路由时调用。可以通过this访问实例,离开守卫常用于禁止用户未保存修改前突然离开

完整导航流解析流程

导航守卫.jpg