路由守卫

作用：

分类

全局守卫：

全局前置守卫 beforeEach()

全局后置守卫 afterEach()

 独享守卫 beforeEnter()

组件内守卫

进入守卫：beforeRouteEnter

 路由更新守卫：beforeRouteUpdate

离开守卫：beforeRouteLeave

---

作用：

对路由进行权限控制

分类

全局守卫：

全局前置守卫 beforeEach()

执行时机：初始化是执行、每次路由切换前执行

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() //放行
   	}
   })

全局后置守卫 afterEach()

执行时机：初始化时执行、每次路由切换后执行

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

 独享守卫 beforeEnter()

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

组件内守卫

进入守卫：beforeRouteEnter

通过路由规则，进入该组件时被调用

  //进入守卫：通过路由规则，进入该组件时被调用
   beforeRouteEnter (to, from, next) {
    // 不能获取组件实例 this,因为执行守卫之前，组件实例还未被创建   
   },

 路由更新守卫：beforeRouteUpdate

在当前路由改变,但是该组件被复用时调用

beforeRouteUpdate(to,from,next){
        // 举例来说,对于一个带有动态参数的路径 /foo/:id,在foo/1 和 foo/2 之间跳转的时候,
        // 由于会渲染同样的 Foo 组件,因此组件实例会被复用.而这个钩子聚在这个情况下被调用
        // 可以访问组件实例 this
   },

离开守卫：beforeRouteLeave

离开守卫：通过路由规则，离开该组件时被调用

  //离开守卫：通过路由规则，离开该组件时被调用
   beforeRouteLeave (to, from, next) {
       //导航离开该组件的对应路由时被调用
       // 可以访问组件实例 'this'
   }