1.什么是路由守卫？
我们先来看看官网文档的描述：
【Navigation Guards 】As the name suggests, the navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.
简单来说，路由守卫就是对用户将要访问的路径进行判断拦截，只有满足一定条件的情况下才可以进入到对应的页面，否则将会被拦截。从而达控制用户权限的目的。比如，用户进入“个人中心”页面，只有在已登陆的情况下才可以进入，在没有登陆态的情况下，将会被拦截并冲路由重映射到登陆页。
2.Vue的路由守卫分类
1.全局路由守卫
2.局部路由守卫
每类路由守卫都有三个生命周期。
3.路由守卫的生命周期
1.全局路由守卫的生命周期：
（1） router.beforeEach((to,from,next)=>{ })
生效时机：导航触发时
（2） router.beforeResolve((to,from,next)=>{ })
生效时机：导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后
（3）router.afterEach((to,from)=>{ })
2.局部路由守卫的生命周期：
（1）beforRouteEnter(to,from,next){ }
注意：在渲染改组件对应的路由被加载进界面前调用，不能使用'this'获取组件实例，因为守卫执行前，组件实例还被没被创建
（2）beforeRouteUpdate(to,from,next){ }
注意：当前路由发生改变时调用，可以使用'this'访问组件实例
（3）beforeRouterLeave(to,from,next){ }
注意：导航离开该组件对应的路由时调用，可以使用'this'访问组件实例
4.每个守卫方法接受三个参数
1.to Router类型，即将要进入的目标路由对象
2.from Router类型，当前导航正要离开的路由
3.next Function类型，使用该方法来调用resolve这个钩子，执行的结果根据next方法调用的参数确定。next方法参数：
（1）next() 进行管道中的下一个钩子，如果全部执行完了，则导航的状态就是confirmed
（2）next(false) 中断当前的导航
（3）next('/'） 跳转到一个不同的地址，当前导航被中断，然后进行一个新的导航
（4）next(error) 导航会被终止且该错误会被传递给router.onError（）
5.完整的导航解析流程
1.导航被触发
2.在失活的组件里调用离开守卫
3.调用全局的beforeEach守卫
4.在重用的组件里调用beforeRouteUpdate
5.在路由配置里调用beforeEnter
6.解析异步路由组件
7.在被激活的组件里调用beforeRouterEnter
8.调用全局的beforeResolve守卫
9.导航被确认
10.调用全局的afterEach钩子
11.触发DOM更新
12.用创建好的实例调用beforeRouterEnter守卫中传给next的回调函数
6.一个例子
假设登陆态为loginState，取值为ture（已登陆），false（未登陆）
在路由配置文件中写入：
router.beforeEach(function(to,from,next(){
if(to.path==='/'){
if(loginState){ //判断当前路由是否需要进行守卫判断
next(); //验证通过，放行
}else{
next('/login') //验证失败，被拦截，且进入登陆页面
}else{ //当前路由不需要进行守卫判断，直接通过
next();
}
})
7.提示
局部路由守卫写在组件的js段中，无需写在mounted或methods方法中。