vue路由有哪些守卫?

vue yekong

Vue路由(vue-router)提供了一系列的导航守卫(路由守卫),这些守卫主要用于监控路由的变化,执行一些操作,如权限验证、页面访问控制、路由跳转等。Vue路由守卫主要分为以下几类:

全局守卫

  1. 全局前置守卫 (beforeEach): 在路由跳转之前全局地调用,可以用来做身份验证、页面权限控制等。
  2. 全局解析守卫 (beforeResolve): 在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后调用。
  3. 全局后置钩子 (afterEach): 在路由跳转之后全局地调用,不会接收next函数也不会改变导航本身。

路由独享守卫

  1. 路由独享的守卫 (beforeEnter): 在路由配置上直接定义的守卫,只有在访问该路由时才会被调用。

组件内的守卫

  1. 组件内守卫:
    • beforeRouteEnter: 在渲染该组件的对应路由被 confirm 前调用,不能获取组件实例this,因为当守卫执行前,组件实例还没被创建。
    • beforeRouteUpdate: 在当前路由改变,但是该组件被复用时调用(例如,对于一个带有动态参数的路径)。
    • beforeRouteLeave: 导航离开该组件的对应路由时调用,可以访问组件实例this

这些守卫提供了不同的时机来“守卫”导航,确保能够在路由跳转发生前后执行所需的逻辑。

使用场景包括但不限于:

  • 登录认证:用户在没有登录的情况下,尝试访问一个需要登录的页面时,可以在全局前置守卫中进行检查,并重定向到登录页面。
  • 权限验证:根据用户的权限,决定是否允许访问特定的路由。
  • 页面标题更新:在全局后置钩子中更新页面标题。
  • 数据预加载:在进入路由前,预先加载数据。

这些守卫可以通过router.beforeEachrouter.beforeResolverouter.afterEach等方法来全局注册,或者在路由配置中通过beforeEnter属性来定义,或者在组件内部通过beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave选项来使用。

喜欢