路由守卫的理解以及一些顺序上的情况

 

1. 作用：对路由进行权限控制
2. 分类：全局守卫、独享守卫、组件内守卫
3. 全局守卫:
       //全局前置守卫：初始化时执行、每次路由切换前执行，其有三个参数分别为to将要到达的路由组件，from之前路由组件，next表示放行
       router.beforeEach((to,from,next)=>{
           console.log('beforeEach',to,from)
           if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
               if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
                   next() //放行
               }else{
                   alert('暂无权限查看')
                   // next({name:'guanyu'})
               }
           }else{
               next() //放行
           }
       })
       
       //全局后置守卫：初始化时执行、每次路由切换后执行，后置守卫不用通过因此没有next
       router.afterEach((to,from)=>{
           console.log('afterEach',to,from)
           if(to.meta.title){ 
               document.title = to.meta.title //修改网页的title
           }else{
               document.title = 'vue_test'
           }
       })

4.独享守卫：
其功能与全局守卫差不多，区别就是一个是写在路由配置里面的。并且其只有一个守卫类似全局前置守卫
用法：在路由配置中beforeEnter：（to,from,next）
eg： //独享路由守卫
            beforeEnter:(to, from, next)=>{
                if (localStorage.getItem("school")==='taotao'){//判断其key，value是否正确
                    next()
                }else alert("信息错误，无访问权限")
            }

5.组件路由守卫：
刚进入组件内 beforeRouteEnter（to，from，next）和组件离开时beforeRouteLeave（to，from，next）记得跳过需要用next不然没有反应。
eg：//、进入组件前，这个时候还没有this，this为undefined
        beforeRouteEnter(to,from,next){
            console.log('此为组件进路时内路由守卫')
            next()
        },
        //离开组件时调用
        beforeRouteLeave(to,from,next){
            console.log("此为组件离开时路由守卫")
            next()
        }
    }

6.总结各个路由守卫的先后顺序以及其与2个生命周期钩子函数actived和deactived的区别：
1.actived与deactived要是标签router-view在keep-alive标签中使用的时候才会出现这2个钩子函数。其与组件内路由守卫中的区别为，组件内路由守卫需要通过路由规则进入或者离开才能执行beforeRouteEnter和beforeRouteLeave。注意前者有this为其vm实例对象，后者this为undefined。此时实例对象还没创建
2.各个路由守卫的顺序在前一个组件离开时候会先调用beforRouteLeave在其中调用next（）之后进入beforeEach前置路由守卫，在到独享路由守卫beforeEnter，然后开始解析组件，之后会进入其路由组件在调用beforeRouteEnter，注意这边路由组件还没更新即没有this对象其为undefined之后。最后会调用afterEach。