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