全局路由守卫，独享路由守卫，组件内路由守卫

路由守卫：

1.作用：对路由进行权限控制

2.分类：全局路由守卫，独享路由守卫，组件内路由守卫

3.全局路由守卫：在router=>index.js

 const routes =[ 
  {
    path: '/test',
    name: 'test',
    component: () => import('../views/Test.vue'),
    meta:{
      isAuth:true,
      title:'测试'
    },
 }{
    path: '/testt',
    name: 'testt',
    component: () => import('../views/Testt.vue'),
    meta:{
      isAuth:false,  //是否需要权限校验
      title:'新闻',  //用于修改网页标题
    }
 },]

// 全局前置路由守卫：初始化时执行、每一次路由切换之前调用
router.beforeEach((to,from,next)=>{
  console.log(to,from);  //to 和 from都是对象
  // next()  //没有next所有的路由跳转都无效
  if(to.meta.isAuth){  //判断是否需要鉴权，就不用to.path === '/home/news' || to.path === '/home/msg'
    if(localStorage.getItem('school')==='atguigu'){  //权限控制的具体规则
      next()
    }else{
      alert('暂无权限查看')
    }
  }else{
    next()
  }
})
// 全局后置路由守卫：初始化时执行、每一次路由切换之后调用
router.afterEach((to,from)=>{
  console.log(to,from);
  document.title = to.meta.title || "网页标题"
})

4.独享路由守卫：

  {
    path: '/test',
    name: 'test',
    component: () => import('../views/Test.vue'),
    meta:{
      isAuth:true,
      title:'测试'
    },
    //独享路由守卫（注意：没有独享后置路由守卫，他可以配合全局后置路由守卫）
    beforeEnter: (to, from, next) => {
      if(to.meta.isAuth){  //判断是否需要鉴权
        if(localStorage.getItem('school')==='atguigu'){  //权限控制的具体规则
          next()
        }else{
          alert('暂无权限查看')
        }
      }else{
        next()
      }
    }
  },

5.组件内路由守卫：

组件内路由守卫和全局前置后置守卫还不一样，组件内守卫包括进入组件之前调用beforeRouteEnter和离开组件时调用beforeRouteLeave,这里的离开组件时并不是全局后置路由守卫，而是指，当前组件被切换到其他组件时。

router=>index.js

  {
    path: '/void',
    name: 'void',
    component: () => import('../views/Void.vue'),
    meta:{
      isAuth:ture,  //是否需要权限校验
      title:'新闻',  //用于修改网页标题
    }
  },

views=>Void.vue

<script>
import Category from '@/components/Category.vue'
  export default {
    name:'Void',
    components:{ Category},

    //通过路由规则，进入改组件时被调用
    beforeRouteEnter(to,from,next){
      console.log('beforeRouteEnter',to,from);//to一定是本组件的路由
      if(to.meta.isAuth){  //判断是否需要鉴权，就不用to.path === '/home/news' || to.path === '/home/msg'
          if(localStorage.getItem('school')==='atguigu'){  //权限控制的具体规则
            next()
          }else{
            alert('暂无权限查看')
          }
        }else{
          next()
        }
    },
    //通过路由规则，离开该组件时被调用
    beforeRouteLeave(){
      console.log('beforeRouteLeave',to,from); //from一定是本组件的路由
      next()
    }
  }
</script>

注释：什么时通过路由规则：通过切换地址栏中的路径，而不是直接挂载到APP中首次加载时。