Vue路由(vue-router)提供了一系列的导航守卫(路由守卫),这些守卫主要用于监控路由的变化,执行一些操作,如权限验证、页面访问控制、路由跳转等。Vue路由守卫主要分为以下几类:
全局守卫
- 全局前置守卫 (
beforeEach
): 在路由跳转之前全局地调用,可以用来做身份验证、页面权限控制等。 - 全局解析守卫 (
beforeResolve
): 在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后调用。 - 全局后置钩子 (
afterEach
): 在路由跳转之后全局地调用,不会接收next
函数也不会改变导航本身。
路由独享守卫
- 路由独享的守卫 (
beforeEnter
): 在路由配置上直接定义的守卫,只有在访问该路由时才会被调用。
组件内的守卫
- 组件内守卫:
beforeRouteEnter
: 在渲染该组件的对应路由被 confirm 前调用,不能获取组件实例this
,因为当守卫执行前,组件实例还没被创建。beforeRouteUpdate
: 在当前路由改变,但是该组件被复用时调用(例如,对于一个带有动态参数的路径)。beforeRouteLeave
: 导航离开该组件的对应路由时调用,可以访问组件实例this
。
这些守卫提供了不同的时机来“守卫”导航,确保能够在路由跳转发生前后执行所需的逻辑。
使用场景包括但不限于:
- 登录认证:用户在没有登录的情况下,尝试访问一个需要登录的页面时,可以在全局前置守卫中进行检查,并重定向到登录页面。
- 权限验证:根据用户的权限,决定是否允许访问特定的路由。
- 页面标题更新:在全局后置钩子中更新页面标题。
- 数据预加载:在进入路由前,预先加载数据。
这些守卫可以通过router.beforeEach
、router.beforeResolve
、router.afterEach
等方法来全局注册,或者在路由配置中通过beforeEnter
属性来定义,或者在组件内部通过beforeRouteEnter
、beforeRouteUpdate
、beforeRouteLeave
选项来使用。