路由的守卫们!!!

路由守卫的作用主要是在跳转前做一些验证,比如登录验证等等。
1、全局的前置守卫:

//to 是指将要去的地方,from 指出发的地方,next 执行下一步。
router.beforeEach((to,from,next)=>{
	const isLogin=localStorage.ele_login?true:false
	if(to.path=='/login'){
		next()
	}else{
		isLogin?next():next('/login')
	}
})
//这是判断是否有登陆,如果前往登录页面则不需要判断登录信息,如果前往其他也页面则需要判断是否有登录。

2、组件内的守卫

//(1)
	beforeRouteEnter(to,from,next){
		在渲染该组件的对应路由被confirm前调用
		不能在这里获取组件的实例this
	}
//(2)重点
	beforeRouteUpdate(to,from,next){
		在当前路由没改变,但是该组件被复用时调用
		举例说明:对于带有参数动态变化的路径,'/goods/:id',
		在'/goods/1''/goods/2'之间来回跳转时调用。
		这个钩子在调用时可以访问this
		
	} 
//(3)
	beforeRouteLeave(to,from,next) {
		离开该组件的对应路由时调用
		一般使用场景为
		(1)当组件中有一个定时器,在路由进行切换的时候可以进行清除定时器
		(2)当页面中有未关闭的内容时可以阻止页面跳转
		(3)可以保存需要保存的东西到vuex中
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值