web前端面试题@九（vue导航守卫）

什么是导航守卫？

         正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。通俗来说就是钩子函数，在对应的路由行为时触发，部分钩子可以阻止 /改变此次路由行为，所以称之为守卫

都有哪些导航守卫（钩子函数）？

    前置守卫：

        1. 全局的前置守卫： beforeEach beforeResolve（同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用）

        2. 路由独享的守卫： beforeEnter

        3. 组件内的守卫： beforeRouterEnter、beforeRouterUpdate、beforeRouteLeave

     后置守卫：

        全局的后置守卫： afterEach

拓展一下~

1:导航守卫的执行顺序是怎么样的？

        beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < beforeRouteEnter < beforeResolve < afterEach

2:导航守卫中的next的用处？

        next的作用，使导航守卫队列的继续向下迭代

3:为什么afterEach守卫没有next？

        afterEach根本不在导航守卫队列内，没有迭代的next

4:beforeEach是否可以叠加？

        beforeEach是可以叠加的，所有的全局前置守卫按顺序存放在beforeHooks的数组里面，

5:路由跳转经历了哪几部分？

        路由跳转的核心方法是transitionTo，在跳转过程中经历了一次confirmTransition，

    （beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < 异步组件加载）这样顺序的queue为第一个，在第一个queue迭代完毕后，执行第二个（beforeRouteEnter < beforeResolve）这样顺序的queue，在执行完毕后，开始执行updateRoute，之后执行全局的afterEach守卫。最后完成路由的跳转。