526互联

vue中的路由守卫

发布时间 2023-10-27 09:55:16作者: 瑞姆

摘要：
"路由守卫" 是前端开发框架中使用的术语，特别是在 Vue中。是一种导航控制机制，用来决定一个路由是否可以被访问、是否可以离开当前路由，或者在路由变化时做一些额外的操作。

路由守卫主要用于权限验证、数据预加载、页面状态保存等场景。

常常见于登录系统后，不会再后退跳转到登录页面。

类型：

  1. 全局守卫：影响所有路由

    • beforeEach(to, from, next)：在路由跳转之前调用
    • afterEach(to, from)：在路由跳转之后调用

  2. 局部守卫：在路由配置内部，只影响这一个路由

    • beforeEnter(to, from, next)：

  3. 组件内的守卫：

    • beforeRouteEnter(to, from, next)：在路由进入该组件的对应路由时调用
    • beforeRouteUpdate(to, from, next)：在当前路由改变，但是该组件被复用时调用
    • beforeRouteLeave(to, from, next)：在当前组件离开对应路由时调用

分析：

全局守卫：

在vue中，全局守卫是用来在路由跳转时执行一些全局级别的逻辑操作的，它影响所有的路由