路由守卫(全局守卫、独享守卫、组件内守卫)

2022-06-09  本文已影响0人  冰点雨

1.作用:对路由器进行权限控制
2.分类:全局守卫、独享守卫、组件内守卫

全局守卫

// 全局前置守卫,初始化时执行,每次路由切换前执行
router.beforeEach((to,from,next)=>{
  if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
      if(localStorage.getItem('school') == "aiguigu"){
        next()//执行
      }else{
        alert('暂无权限查看')
      }
  }else{
    next()
  }
})

// 全局后置守卫,初始化时执行,每次路由切换后执行
router.afterEach((to,from,next)=>{
  if(to.meta.title){
      document.title = to.meta.title //修改网页的title
  }else{
    document.title = "vue_test"
  }
})

独享守卫

 beforeEnter:(to,from,next)=>{
            if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
              if(localStorage.getItem('school') == "aiguigu"){
                next()//执行
              }else{
                alert('暂无权限查看')
              }
            }else{
              next()
            }
          }

组件内守卫

//进入守卫,通过路由规则,进入该组件时被调用
  beforeRouterEnter(to,from,next){
    if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
      if(localStorage.getItem('school') == "aiguigu"){
        next()//执行
      }else{
        alert('暂无权限查看')
      }
    }else{
      next()
    }
  },
   //离开守卫,通过路由规则,离开该组件时被调用
  beforeRouterLeave(to,from,next){

  },
上一篇下一篇

猜你喜欢

热点阅读