Vue-router 路由守卫 全局守卫

这篇文章花了半天的时间编写，请怀着感恩的心阅读.......

该篇文章需要读者有一定的vue的路由基础，要不然容易懵

概念：路由守卫是Vue框架中的概念，就是在路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。  可以做一个形象的比喻：你想进去某一个房间或者去另外的一个会议室的时候，有个“门卫”在进行保护，需要满足一定的条件（尤其是后台管理系统，绝大部分功能需要登录才能进行）才能放你进去，在vue中这个"门卫"就是路由守卫。

分类：主要大概分为三种，全局守卫、路由独享守卫（只有前置）、组件内部守卫

这篇文章主要讲的是全局守卫

全局守卫：先看一下代码（router.beforeEach函数）

router.beforeEach((to, from, next) => {
	console.log(to.fullPath);
	if(to.fullPath!='/login'){//如果不是登录组件
		if(!localStorage.getItem("username")){//如果没有登录，就先进入login组件进行登录
			next('/login');
		}else{//如果登录了，那就继续
			next();
		}
	}else{//如果是登录组件，那就继续。
		next();	
	}

1. 以上代码表示，进入任何路由前，都需要先判断是否登录过，如果没有登录过，那就进入登录组件（/login）进行登录。如果登录过，那就一切正常，这就是路由守卫的意思。

2. beforeRouteEnter 函数的执行时机：当点击路由连接时，进入组件时，组件还没有显示时执行

3. router.beforeEach函数的三个参数分别代表的意思：

• to：即将要进入的目标路由对象
• from：当前正要离开的路由
• next：执行下一步