【前端攻城狮之vue基础】03路由守卫+actived生命周期钩子+独享路由守卫+组件内路由守卫+history与hash模式

1.两个新的生命周期钩子

路由组件有两个新的生命周期钩子，分别是actived和deactived,代表激活和失活，激活指组件出现在我们眼前，失活指组件从我们眼前消失

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

2. 具体名字：

   activated路由组件被激活时触发。deactivated路由组件失活时触发。

 // 组件激活出现在眼前的生命周期钩子
    activated(){
       this.timer=setInterval(()=>{
        this.opacity+=0.01
        console.log('@')
        if(this.opacity>=1 ) this.opacity=0
      },16)

    },
    // 组件失活，从眼前消失的生命周期钩子
    deactivated(){
      clearInterval(this.timer)
    }

2.全局前置/后置路由守卫

全局前置路由守卫：对所有路由在跳转之前进行相关操作，一般多为鉴权操作，来判断用户有没有访问权限

全局后置路由守卫：对所有路由在跳转之后进行相关操作

// 配置全局前置路由守卫：在所有路由跳转前进行相关操作  函数beforeEach，初始化，每次路由切换之前会自动调用回调函数
router.beforeEach((to,from,next)=>{ //回调函数有三个参数，分别是跳转后的路由，跳转前的路由,和决定是否跳转的next函数
    console.log('前置路由',to)
    // console.log(from,next)
    if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school')==='atguigu'){//放行规则
            next()//放行
        }   
        else{
            alert('没有权限访问！，请联系管理员')
        }
    }else{//不需要权限控制，放行
        next()
    }
    

})
//全局后置守卫：初始化时执行、每次路由切换后执行

// 配置全局后置路由守卫，在所有路由跳转后进行相关操作，函数afterEach,在初始化和路由切换之后会自动调用回调函数
router.afterEach((to)=>{//回调函数只有两个参数，没有next参数，因为路由已经跳转完了，没有意义让next函数决定路由是否跳转
    console.log('后置路由',to)
   // console.log(from)
    document.title=to.meta.title || '尚硅谷'   //如果操作数一为假，表达式的值就是第二个操作数的值,修改网页的title

3.独享路由守卫

某一个路由单独享用的路由守卫，只有独享前置路由守卫，没有独享后置路由守卫

与全局前置路由守卫没太大区别，只是函数名和写代码的位置不同，独享路由守卫作为路由单独的一个配置项使用

写在 router.js配置文件中

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()
	}
}

4.组件内路由守卫

写在组件的Script标签中 ,包括beforeRouteEnter 函数【根据路由规则，进入组件之前调用】和beforeRouterLeave函数【根据路由规则，离开组件之前调用】，to 要去的组件的路由对象，from 离开的组件的路由对象，next放行函数

 //组件内路由守卫
//进入守卫
    beforeRouteEnter(to,from,next){
      console.log('beforeRouteEnter',to,from)
      //鉴权
       if...
       next()//放行
    },
    //离开守卫
    //根据路由规则，离开路由之前调用
    beforeRouteLeave(to,from,next){
      console.log('beforeRouteLeave',to,from)
      next()//放行
    }

5.history模式与hash模式

• 路由器的两种工作模式：hash模式与history模式，在项目打包，部署上线的的时候，如果是history模式，用户访问资源后刷新会报404的错误

• 路径#/之后的都是哈希值

• 哈希值最大的特点：不会作为路径的一部分发给服务器