Vue中router.beforeEach与beforeRouteEnter的区别

使用场景：在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。
定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

两种函数：

• 1、router.beforeEach(function(to,form,next){}) /在跳转之前执行/

• 2.router.afterEach(function(to,form))/在跳转之后判断/

全局钩子函数

顾名思义，它是对全局有效的一个函数

// router=>index.js配置全局路由钩子
router.beforeEach((to, from, next) => {
if(to.fullPath==='/app'){
	 next('login')
}else{
	 next()
} 
}); 

beforeEach函数有三个参数：

to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
afterEach函数不用传next()函数

在官方文档上是这样定义的：

可以在路由组件内直接定义以下路由导航钩子

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
这里简单说下钩子函数的用法：它是和data,methods平级的。
beforeRouteLeave(to, from, next) {
next()
},
beforeRouteEnter(to, from, next) {
next()
},
beforeRouteUpdate(to, from, next) {
next()
},
data:{},
method: {}
PS:在使用vue-router beforeEach钩子时，你也许会遇到如下问题：

router.beforeEach((to, from, next) => {
//判断登录状态简单实例
var userInfo = window.localStorage.getItem(‘token’);
if (userInfo) {
next();
} else {
next(’/login’);
}
})
然后你会发现出现如下错误：出现dead loop错误

router.beforeEach((to, from, next) => {
var userInfo = window.localStorage.getItem(‘token’);//获取浏览器缓存的用户信息
if(userInfo){ //如果有就直接到首页咯
next();
} else {
if(to.path==’/login’){ //如果是登录页面路径，就直接next()
next();
} else { //不然就跳转到登录；
next(’/login’);
}

}
})