关于vue-router里面router.beforeEach（）那点事

一.router.beforeEach（）是什么？

• 官方名称：全局前置守卫。（当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。）
• 个人通俗讲：就是看门的（你要进门，得有某某凭证才行，检查凭证的时候你得给我等着），也就是每一个router跳转以前都会调用的一个方法。

二.router.beforeEach长什么样？

• router.beforeEach((to, from,next) => { // 返回 false 以取消导航 return false })

三.传递的参数解析

• to即将要进入的目标。比如说你在首页想要进入个人中心，此时个人中心就是to.
• from当前导航正要离开的路由。比如说你正要从首页跳转到个人中心，进入个人中心首先肯定是需要登录状态才能进入。当前我们所在的首页就是from.
• next一个函数，beforeEach（）必须调用next()来resolved该钩子。

四.下面简单写个配置，便于理解，用了很多通俗的语言

// 路由前置守卫
router.beforeEach((to,from,next)=>{
	// to:要去的地方
	//from:将要离开的页面
	// 如果即将进入的目标不是登录页面，
	// 那么我们检查权限。如果没有权限，跳转到登录页，否则正常执行。
	// 如果即将进入的目标是登录页面，那么正常执行
	if(to.path !== "/login"){
		// 这里相当于我不是去登录，我想访问:比如说个人中心，我的文章等需要权限才能查看的数据
		if(store.state.user.username &&store.state.user.appkey&&store.state.user.email){
			// 这里相当于你要去个人中心，而且我检查通过，那么，放行，return
			next();
			return;
		}else{
			//这里相当于我不是去登录页面，而且我啥权限也没有，那么肯定不让你去呀。直接滚回登录页
			next('/login');
			return;
		}
	}else{
		// 这你相当于你要去登录，那么正常去登录页就行
		next();
		return;
	}
})

• 到此，router.beforeEach（）是什么，怎么使用，你学费了吗。

如果有不当之处，欢迎指正。