vue-router导航守卫

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

全局设置

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

beforeEach：全局前置守卫

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

afterEach：全局后置守卫

跟全局前置守卫相反

beforeResolve：全局解析守卫

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

路由配置守卫

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

image.png

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

组件内部守卫

这里有三个方法：

beforeRouteEnter

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

beforeRouteUpdate (2.2 新增)

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

beforeRouteLeave

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

image.png