vue-router导航守卫

vue-router的守卫可以分为三类守卫, 全局设置,路由设置,组件内部设置

全局设置

在全局的地方进行书写的,就是进行全局的拦截,不管你在在这路由里的哪个路由,都会被拦截到,

beforeEach:全局前置守卫

按着名字也很好理解,each就是每一个的意思
一般作为一个网站的入口处,你不管从哪个进入,首先进行判断你是否登录这个状态,如果为登录就跳到登录页面。

afterEach:全局后置守卫

跟全局前置守卫相反

beforeResolve:全局解析守卫

在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用,就是对于一个路由来说,进入组件后的最后一步

路由配置守卫

就是是在路由配置的位置进行,就是beforeEnter这个方法,这里就是在路由进来的时候进行拦截的,


image.png

不过在路由配置这里的拦截只有这一个方法

组件内部守卫

这里有三个方法:

beforeRouteEnter

渲染该组件的路由被确认之前调用,这个时候组件还没有被建立,所以这个时候也没有this指向

beforeRouteUpdate (2.2 新增)

这个方法应用于一个组件对应多个路由的切换所执行的方法,可以运用在你切换路由来调用该组件内部不同方法,这个时候组件已经有this指向了,所以就可以通过this.XXX() 的方法来进行调用内部方法

beforeRouteLeave

这个在当前组件离开组件所对应的路由所执行的方法,可以运用在比如对组件内一些数据修改后的保存方面,


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 导航守卫 正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫,有多种机会植入路由导航过程...
    前端_周瑾阅读 1,276评论 0 4
  • 完整的导航解析流程 导航被触发。 在失活的组件里调用离开守卫。beforeRouteLeave (to, from...
    R_X阅读 1,373评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,041评论 19 139
  • 全书围绕一个结论展开论证:为什么是小圈子,大社交? 为了论证这个结论,作者将全书分为九个章节,每个章节介绍了一个小...
    虫子在啃书阅读 717评论 0 2
  • ——《古典之殇》之每个故乡都在消逝读后感 “故乡”一词,于我而言有些陌生。各家名作中“故乡”是永恒的话题。而到我...
    褰裳涉芸阅读 1,650评论 0 10