组件内路由守卫 beforeRouteEnter和beforeRouteLeave

组件内路由守卫和全局前置后置守卫还不一样，组件内守卫包括进入组件之前调用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>

很赞哦！ (0)