VUE中路由守卫分为三种：①全局路由守卫；②组件内路由守卫；③路由独享守卫
一.全局路由守卫
全局路由守卫可以简单的理解为学校门口的保安，想要进入学校就必须通过保安的检查，要告诉路由守卫你从哪里来（to）？要到哪里去（from）？然后保安再告诉你下一步该怎么做（next）？如果你的确是这个学校允许进入的人，那就让你进入，否则就要打电话给办公室，跟办公室商量(登录注册)，给你权限。
1.全局前置守卫：router.beforeEach((to,from,next)=>{})；
to:Router即将要进入的目标路由对象
from:Route当前导航正要离开的路由
next ：调用该方法后，才能进入下一个钩子函数（afterEach）
next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由
场景：一个网站如果用户没有登录在进入某个或者所有页面的时候都必须先登录再进入页面
1 在router.js或者main.js配置都可以
2 router.beforeEach((to, from, next) => {
3 //这里模拟了一个获取用户信息的方法
4 let isLogin = window.sessionStorage.getItem('userInfo');
5 if (isLogin) {
6 //如果用户信息存在则往下执行。
7 next()
8 } else {
9 //如果用户token不存在则跳转到login页面
10 if (to.path === '/login') {
11 next()
12 } else {
13 next('/login')
14 }
15 }
16 })
2.全局后置钩子router.afterEach((to,from)=>{})
然而和守卫不同的是，这个钩子不会接受 next 函数也不会改变导航本身，全局前置守卫用的比较多，这个钩子函数用的比较少。
二.路由独享守卫
路由独享守卫与全局前置守卫的方法参数是一样的，只不过路由独享守卫是在路由配置页面单独给路由配置的一个守卫。
1 export default new VueRouter({
2 routes: [
3 {
4 path: '/',
5 name: 'yingaxiang',
6 component: 'Yingaxiang',
7 beforeEnter: (to, from, next) => {
8 // ...
9 }
10 }
11 ]
12 })
三.组件内的守卫
组件内守卫可以简单的理解为学校实验室的老师，想要进入实验室就必须通过老师的检查，要告诉路由守卫你从哪里来（to）？要到哪里去（from）？然后老师再告诉你下一步该怎么做（next）？如果你的确是今天在实验室上课的学生，那就让你进入，否则就要打电话给导员，跟导员商量，给你权限。
组件路由守卫是写在每个单独的vue文件里面且跟methods:{}等同级别书写。
①beforeRouteEnter(to,from,next){//注意：在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例next(vm=>{})}
②beforeRouteUpdate(to,from,next){//同一页面，刷新不同的数据是调用，对于一个带有动态参数的路径/foo:id,在/foo/1与/foo/2之间跳转是用}
③beforeRouteLeave(to,from,next){//离开当前组件页面是调用}
场景：假设所有页面背景为灰色，但登陆注册页面为白色
1 beforeRouteEnter(to, from, next) {
2 window.document.body.style.backgroundColor = 'white';
3 next(vm=>{});
4},
5 beforeRouteLeave(to, from, next) {
6 window.document.body.style.backgroundColor = '';
7 next();
8}
