vue-router导航守卫（钩子函数）

vue-router有哪几种导航守卫（钩子函数）

概念

导航发生变化时，导航钩子主要用来拦截导航，让它完成跳转或取消

拦截方式

• （一）全局的

  • （1）beforeEach - 前置钩子函数
    • 参数to、from、next
      • to：去哪里
      • from：从哪里
      • next()：是否跳转由它决定
    • 使用场景 - 未登录去下单，跳转到登录页
  • （2）afterEach - 后置钩子函数
    • 参数to、from
      • to:去哪里
      • from:从哪来
    • 使用场景 - 改变浏览器title

• （二）单个路由独享的

  • beforeEnter
    • 参数to、from、next
      • 同beforeEach

• （三） 组件级的

  • （1）beforeRouteEnter - 进入组件前
    • 参数to、from、next
      • 同beforeEach
    • 使用场景 - 进入这个组件前你要做什么初始化操作
  • （2）beforeRouteUpdate - 组件更新或改变时
    • 参数to、from、next
      • 同beforeEach
    • 使用场景 - 复用组件时（对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候）
  • （3）beforeRouteLeave - 离开组件时
    • 参数to、from、next
      • 同beforeEach
    • 使用场景 - 清除定时器等等