导航守卫又称路由守卫,实时监控路由跳转时的过程,在路由跳转的各个过程执行相应的操作,类似于生命周期函数

路由守卫一共分为三类:全局守卫,路由独享的守卫,组件内的守卫。

函数执行顺序

image-20220402213832383

一、全局守卫(所有路由配置的组件都会触发)

1.router.beforeEach(全局前置守卫)
2.router.beforeResolve(全局解析守卫)
3.router.afterEach(全局后置守卫)

beforeEach和beforeResolve在功能上类似,区别是beforeResolve的执行顺序在 beforeEach 和 组件内beforeRouteEnter 之后,afterEach之前。

afterEach:和beforeEach相反,他是在路由跳转完成后触发,参数包括to,from没有了next(参数会单独介绍),他发生在beforeEach和beforeResolve之后,beforeRouteEnter(组件内守卫,后讲)之前。

二、路由独享的守卫

【路由独享的】是指在单个路由配置的时候也可以设置的钩子函数,其位置就是下面示例中的位置,也就是像Foo这样的组件都存在这样的钩子函数。目前他只有一个钩子函数beforeEnter:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

该守卫接收的参数与全局守卫是一样的,但是该守卫只在其他路由跳转至配置有beforeEnter路由表信息时才生效。

三、组件内守卫

是指在组件内执行的钩子函数,类似于组件内的生命周期,相当于为配置路由的组件添加的生命周期钩子函数。钩子函数按执行顺序包括beforeRouteEnter、beforeRouteUpdate (2.2+)、beforeRouteLeave三个,三者分别对应:进入该路由时执行,该路由中参数改变时执行,离开该路由时执行

四、路由守卫的参数

to:目标路由对象;

from:即将要离开的路由对象;

next:执行下一步

1.但凡涉及到有next参数的钩子,必须调用next() 才能继续往下执行下一个钩子,否则路由跳转等会停止。

2.如果要中断当前的导航要调用next(false)。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到from路由对应的地址。(主要用于登录验证不通过的处理)

3.当然next可以这样使用,next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。意思是当前的导航被中断,然后进行一个新的导航。可传递的参数与router.push中选项一致。