持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

前言

今天来讲一下路由守卫的小知识，在我学习这个的时候一直是一脸懵的状态，其实到现在也是，所以准备更新一篇文章来学习一下

activated 和deactivatde是对组件所独有的两个钩子，用于捕获路由组件的激活状态

具体使用方法：

1.activated路由组件被激活时触发

2.deactivared路由组件失败时触发

路由守卫

作用：对路由进行权限控制

分类：全局守卫，独享守卫，组件内守卫

1.全局守卫，meta路由信息源

前置路由守卫

// 全局前置路由守卫:初始话时,每次路由切换前执行
roture.beforeCreate((to.from.next)=>{
	if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
		if(localStorage.getItem('shop')==='login'){//权限控制的具体规则
			next()//放行
		}else{
			alert('无权限查看')
		}
	}else{
		next()//放行
	}
) }

后置路由守卫

// 全局后置路由守卫:初始话时,每次路由切换后执行
roture.afterEach((to.from)=>{
	if(to.meta.title){
		document.title=to.meta.title//修改网页的title
	}else{
		document.title='vue-test'
	}
) }

2.独享守卫

roture.beforeCreate((to.from.next)=>{
		if(localStorage.getItem('shop')==='login'){
			next()//放行
		}else{
			alert('无权限查看')
		}
	}
) }

3.组件内守卫

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

beforRouteEnter(to,from,next){...next()}

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

beforRouteLeave(to,from,next){...next()}

路由的两种工作模式

1.对于与url来说，什么是hash值？ 2.has值不会包含在HTTP请求中，即使=：hash值不会带给服务器

3.hash模式

a：地址中永远带着#，不美观

b:若以后将地址通过第三方手机app分享，若app校验比较严格，则地址会被标记为不合法

c：兼容性很好

4.histor模式

a：地址干净，美观

b：兼容性和hash模式相比略差

c：应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题