路由守卫详解知多少

导航守卫,也叫路由守卫,路由的前置验证

路由守卫, 类似于一个前置的操作

• 全局路由守卫

index.js

router.beforeEach((to,from,next)=>{
	if(to.path=='/login'){
		next()
	}else{
		next('/login')
	}
})

/全局路由守卫
router.beforeEach((to,from,next)=>{
	// 演示效果,点击商品/goods跳到到用户中心/user/pay,点击其他正常
	// 做登陆功能的话, 如果用户没有登录,跳到登陆界面,登录了的话,继续走下一步
	// 这是全局的,所有的路由都要进行这个验证
	if(to.path=='/goods'){
		next('/user/pay')
	}else{
		next()
	}
})

• 组件内守卫

export default{
	beforeRouteEnter:function(to,from,next){
		if(false){
			next()
		}else{
			next('/login')
		}
	}
}

<script>
	export default{
		beforeRouteEnter:function(to,from,next){
			if(to.path=='/user/pay'){
				next('/login')
			}else{
				next()
			}
		}
	}
</script>

参考

https://gitee.com/zenglingchuan/test_vue