路由守卫

路由守卫 对路由进行权限的控制

分类:全局守卫、独享守卫、组件内守卫

1. 全局守卫:

全局前置守卫:初始化时执行、每次路由切换前执行
 router.beforeEach((to,from ,next)=>{
    if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
      if(localstorage.getItem('school') ==="zhang"){//权限控制的具体规则
        next()//放行
     }else{
      alert(//"暂无权限查看·)//next({name: ' guanyu' })
    }
  }else{
    next() //放行
  }
})

2. 全局后置守卫:初始化时执行、每次路由切换后执行

router.afterEach((to,from)=>{
  if(to.meta.title){
     document.title = to.meta.title //修改网页的title
  }else{
     document.title = 'vue test
  }
})

2. 独享路由守卫

beforEnter((to,from ,next)=>{
    if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
      if(localstorage.getItem('school') ==="zhang"){//权限控制的具体规则
        next()//放行
     }else{
      alert(//"暂无权限查看·)//next({name: ' guanyu' })
    }
  }else{
    next() //放行
  }
})

3 组件内路由守卫

• 进入守卫，通过路由规则，进入该组件时被调用 beforRouteEnter(to,from,next)
• 离开守卫，通过路由规则，离开该组件时被调用 beforRouteleave(to,from,next)