美文网首页
web前端面试题@九(vue导航守卫)

web前端面试题@九(vue导航守卫)

作者: 王芃皓 | 来源:发表于2019-11-24 11:08 被阅读0次

什么是导航守卫?

         正如其名,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守卫。最后完成路由的跳转。

相关文章

  • web前端面试题@九(vue导航守卫)

    什么是导航守卫? 正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入...

  • vue导航守卫

    导航守卫:vue-router主要提供跳转或取消的方式守卫导航, 导航守卫分为全局前置守卫、全局解析守卫、全局后置...

  • vue导航守卫

    根据作用域的不同,vue导航守卫分三种:全局导航守卫、组件内部导航守卫、路由独享守卫 全局导航守卫,在main.j...

  • vue-router进阶

    导航守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航(路由发生改变才会守卫)。参数 ...

  • 2022年web前端面试题

    web前端面试题分为:html/css面试题、javascript面试题、vue面试题、性能优化面试题、网络方面面...

  • 导航守卫

    vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航 全局守卫 全局前置守卫 当一个导航触发时...

  • 最全vue面试必问题(附题)

    vue面试题: web前端开发工程师(vue) | 智一面[http://www.gtalent.cn/exam/...

  • vue-router导航守卫&&滚动&&路由懒加载

    导航守卫 正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫,有多种机会植入路由导航过程...

  • 导航守卫以及keep-alive

    一 什么是导航守卫? vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.vue-router提...

  • vue路由导航守卫

    vue路由导航守卫:导航守卫通俗来说就是utr跳转的监听,当a跳转到b的过程执行的函数 导航守卫的使用方法 首先定...

网友评论

      本文标题:web前端面试题@九(vue导航守卫)

      本文链接:https://www.haomeiwen.com/subject/wyqlwctx.html