vue路由守卫

路由守卫分为三种 ——分别是：全局路由守卫、组件路由守卫、独享路由守卫。

一.全局守卫

全局守卫又分为全局前置守卫、和后置守卫

1. router.beforeEach((to,from,next)=>{})

        回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。

        从名字全局前置守卫不难理解，它是全局的，即对 整个单页应用（SPA） 中的所有路由都生效，所以当定义了全局的前置守卫，在进入每一个路由之前都会调用这个回调，那么如果你在回调中对路由的跳转条件判断出错，简单点就是死循环…因为你遗漏了某种路由跳转的情况，守卫会一直执行。所以在使用全局前置守卫的时候一定要判断清楚可能会出现的路由跳转的情况。

2.router.afterEach((to, from) => {}）

        只有两个参数，to：进入到哪个路由去，from：从哪个路由离。

        理解了全局前置守卫，那么全局后置守卫也就那么一回事。全局后置守卫是整个单页应用中每一次路由跳转后都会执行其中的回调。所以多用于路由跳转后的相应页面操作，并不像全局前置守卫那样会在回调中进行页面的重定向或跳转。

二.组件内的守卫

组件路由守卫分为到达这个组件时，离开这个组件时

1. beforeRouteEnter:(to,from,next)=>{}——到达

        to，from参数与上面使用方法一致。next回调函数略有不同。

2. beforeRouteLeave:(to,from,next)=>{}——离开

        点击其他组件时，判断是否确认离开。确认执行next()；取消执行next(false)，留在当前页面。

三.路由独享的守卫

1. beforeEnter:(to,from,next)=>{}

        与全局路由守卫用法一致，但是只能针对一个页面使用