路由守卫是什么？
2023-08-04 20:17:57
路由守卫是Vue Router提供的一种机制，主要用来通过跳转或取消的方式守卫导航。在Vue.js应用中，路由守卫可以帮助开发者在路由跳转过程中执行一些特定的逻辑，比如权限验证、页面跳转前的数据获取等。
路由守卫的分类路由守卫分为全局的、单个路由独享的、组件内的三种：
全局路由守卫：
beforeEach：在路由跳转前触发，参数包括to（目标路由对象）、from（即将要离开的路由对象）、next（控制导航的函数）。这个钩子作用主要是用于登录验证等。
beforeResolve：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后调用。即在beforeEach和组件内beforeRouteEnter之后，afterEach之前调用。
afterEach：在路由跳转完成后触发，参数包括to、from，没有next参数。它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。
单个路由独享的守卫：
beforeEnter：在单个路由配置时设置的钩子函数，参数与beforeEach完全相同。如果都设置，则在beforeEach之后紧随执行。
组件内的守卫：
beforeRouteEnter：路由进入之前调用，参数包括to、from、next。该守卫在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用。在这个钩子中，不能访问组件实例（this为undefined），但可以通过传一个回调给next来访问组件实例。
beforeRouteUpdate（v2.2+）：在当前路由改变，但是该组件被复用时调用，可以通过this访问实例。参数包括to、from、next。例如，对于一个带有动态参数的路径/foo/:id，在/foo/1和/foo/2之间跳转时，组件实例会被复用，该守卫会被调用。
beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问组件实例this，参数包括to、from、next。
- to：目标路由对象。
- from：即将要离开的路由对象。
- next：最重要的一个参数，用于控制导航的流程。必须调用next()才能继续往下执行下一个钩子，否则路由跳转等会停止。可以通过next(false)中断当前的导航，通过next('/')或next({ path: '/' })进行一个新的导航，或者通过next(error)传递一个Error实例来终止导航并触发router.onError()注册的回调。
当点击切换路由时，路由守卫的执行顺序如下：
beforeRouteLeave（如果有的话）-> beforeEach -> beforeEnter（如果有的话）-> beforeRouteEnter -> beforeResolve -> afterEach -> 组件的生命周期钩子（如beforeCreate、created等）-> beforeRouteEnter的next的回调（如果有的话）
示例图片
这张图片展示了导航守卫钩子函数的执行顺序，有助于理解各个守卫在路由跳转过程中的作用时机。
综上所述，路由守卫是Vue Router提供的一种强大的机制，可以帮助开发者在路由跳转过程中执行特定的逻辑，从而增强应用的灵活性和安全性。
热门标签
