前端/移动开发面试题更新 2026-08-05

在 Vue Router 中,导航守卫可以分为哪几类?每类守卫在导航过程中的执行时机是什么,并且它们各自会接收到哪些参数?

前端/移动开发技术原理VueVue Router

考察说明

考查对 Vue Router 导航守卫分类、执行时机及参数的理解。

回答思路

  1. 【回答框架 1】Vue Router 的导航守卫主要分为三类:全局守卫、路由独享守卫和组件内守卫。全局守卫包括 beforeEach、beforeResolve 和 afterEach;路由独享守卫是 routes 配置中的 beforeEnter;组件内守卫有 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。
  2. 【回答框架 2】全局前置守卫 beforeEach 接收 to、from 和 next 三个参数,next 必须被调用以放行导航。全局解析守卫 beforeResolve 在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用,同样接收 to、from、next。全局后置守卫 afterEach 在导航被确认后触发,接收 to 和 from,不接收 next。
  3. 【回答框架 3】路由独享守卫 beforeEnter 在路由配置中使用,接收 to、from、next。组件内守卫 beforeRouteEnter 在渲染该组件的对应路由被确认前调用,此时组件实例尚未创建,因此不能访问 this,但可以通过传给 next 的回调访问实例;beforeRouteUpdate 在当前路由改变但组件被复用时调用,可访问 this;beforeRouteLeave 在导航离开该组件的路由时调用,可访问 this。
  4. 【关键点 1】Vue Router 导航守卫分为全局、路由独享、组件内三类。
  5. 【关键点 2】beforeEach、beforeResolve 接收 to、from、next,afterEach 仅接收 to、from。
  6. 【关键点 3】组件内守卫中,beforeRouteEnter 不能访问 this,其他两个可以。
  7. 【易错点 1】容易混淆全局后置守卫 afterEach 是否有 next,实际上它没有 next 参数。
  8. 【易错点 2】beforeRouteEnter 中 this 不可用,若需访问组件实例,只能在 next 回调中获取。
  9. 【易错点 3】守卫中忘记调用 next 会导致导航被阻塞,需注意所有前置守卫都必须调用 next。