vue-router的守卫可以分为三类守卫， 全局设置，路由设置，组件内部设置
全局设置
在全局的地方进行书写的，就是进行全局的拦截，不管你在在这路由里的哪个路由，都会被拦截到，
beforeEach：全局前置守卫
按着名字也很好理解，each就是每一个的意思
一般作为一个网站的入口处，你不管从哪个进入，首先进行判断你是否登录这个状态，如果为登录就跳到登录页面。
afterEach：全局后置守卫
跟全局前置守卫相反
beforeResolve：全局解析守卫
在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用，就是对于一个路由来说，进入组件后的最后一步
路由配置守卫
就是是在路由配置的位置进行，就是beforeEnter这个方法，这里就是在路由进来的时候进行拦截的，
image.png
不过在路由配置这里的拦截只有这一个方法
组件内部守卫
这里有三个方法：
beforeRouteEnter
渲染该组件的路由被确认之前调用，这个时候组件还没有被建立，所以这个时候也没有this指向
beforeRouteUpdate (2.2 新增)
这个方法应用于一个组件对应多个路由的切换所执行的方法，可以运用在你切换路由来调用该组件内部不同方法，这个时候组件已经有this指向了，所以就可以通过this.XXX() 的方法来进行调用内部方法
beforeRouteLeave
这个在当前组件离开组件所对应的路由所执行的方法，可以运用在比如对组件内一些数据修改后的保存方面，
image.png
网友评论