一.路由守卫就是：

比如说    
    
    
    
，当点击商城的购物车的时候   


     


     


     


，需要判断一下是否登录



 




 




 




 ，如果没有登录   

   

   

   
，就跳转到登录页面    

     

     

     

，如果登陆了




  




  




  




 ，就跳转到购物车页面  


  


  


  
，相当于有一个守卫在安检

路由守卫有三种：

1：全局钩子： beforeEach    
    
    
    
、 afterEach

2：独享守卫（单个路由里面的钩子）： beforeEnter   


     


     


     


、 beforeLeave

3：组件内守卫：beforeRouteEnter



 




 




 




 、 beforeRouteUpdate   

   

   

   
、 beforeRouteLeave

全局守卫

router.beforeEach() 进入之前触发

router.afterEach() 进入之后触发

每个守卫方法接收三个参数：

①to: Route: 即将要进入的目标路由对象（to是一个对象     
     
     
     
，是将要进入的路由对象




   




   




   




 ，可以用to.path调用路由对象中的属性）

②from: Route: 当前导航正要离开的路由

③next: Function: 这是一个必须需要调用的方法
 



 



 



 
，执行效果依赖 next 方法的调用参数  
    
    
    
。

【路由守卫写在main.js文件                    ，或者写在router文件夹下的index.js文件】

① 前置路由守卫（每次切换前被调用）

首先先在需要配置路由守卫的地方加上 meta: { isAuth: true }

{ path: /, name: Home, component: () => import(../views/Home.vue), meta: { isAuth: true, title:主页 }, }, //全局前置路由守卫————初始化的时候被调用    

     

     

     

、每次路由切换之前被调用 router.beforeEach((to, from, next) => { //如果路由需要跳转 if (to.meta.isAuth) { //判断 如果school本地存储是qinghuadaxue的时候 




    




    




    




 ，可以进去 if (localStorage.getItem(school) === qinghuadaxue) { next() //放行 } else { alert(抱歉

















，您无权限查看！) } } else { // 否则                    ，放行 next() } })

② 后置路由守卫（每次切换后被调用）

是路由跳转之后执行的事件  



     



     



     



 ，可以用作跳转路由后更改网页名

首先路由的meta需要配置title的名字

{ path: /, name: Home, component: () => import(../views/Home.vue), meta: { isAuth: true, title:主页 }, }, //全局后置路由守卫————初始化的时候被调用




  




  




  




 、每次路由切换之后被调用 router.afterEach((to, from) => { document.title = to.meta.title || 默认名 //修改网页的title })

③ 独享路由守卫（某一个路由所单独享用的路由守卫）

独享路由守卫只有前置没有后置

{ path: /, name: Home, component: () => import(../views/Home.vue), meta: { isAuth: true }, beforeEnter: (to, from, next) => { if (to.meta.isAuth) { //判断是否需要授权 if (localStorage.getItem(school) === qinghuadaxue) { next() //放行 } else { alert(抱歉

















，您无权限查看！) } } else { next() //放行 } } },

④ 组件内守卫（某一个路由所单独享用的路由守卫）

独享路由守卫只有前置没有后置    
    
    
    
，直接写在.vue文件中

//通过路由规则   


     


     


     


，进入该组件时被调用 beforeRouteEnter(to,from,next) { if(toString.meta.isAuth){ if(localStorage.getTime(school)===qinghuadaxue){ next() }else{ alert(学校名不对



 




 




 




 ，无权限查看！) } } else{ next() } }, //通过路由规则   

   

   

   
，离开该组件时被调用 beforeRouteLeave(to,from,next) { next() }