beforeEach的深入研究，及beforeEach和beforeRouteEnter区别？

之前一直困惑它俩的区别，也没找到合适的文档，直到有天看到一篇博客，一起来学习下：

之前是在created钩子函数里面，发现这是在今天当前页面之后了。先回顾一下钩子函数beforeEach
const router = new VueRouter({})
router,beforeEach((to,from,next) =>{
const {auth = true } =meta // meta代表的是to中的meta对象
var isLogin = Boolean(state.state.user.id) // true 用户已登录，false 用户未登录
if(auth && !islogin && path !=='/login'){
return next({path:'/login'}) // 跳转到login页面
}
next（） // 进行下一个钩子函数
})
这个beforeEach的钩子函数，它是一个全局的before 钩子函数， （before each）意思是在 每次每一个路由改变的时候都得执行一遍。
组件内的钩子函数 ( beforeRouteEnter 和 beforeRouteLeave 再加一个watch)

在vue2.x中

1）最先执行的是 beforeEach钩子，所有路由开始的时候最先执行
2）然后就是router的配置中的beforeEnter.
3) 接下来就是 路由beforeARouteEnter -- 然后是组件自身的生命周期 -- 路由beforeRouteLeave
beforeRouteEnter (to, from, next) {} 与 beforeRouteLeave不再是组件中route配置下的对象了，他们和data处于同级别的地位。
可以看出： 新设计的路由 淡化了组件自身跟着路由生命周期变化而变化，而是依赖组件自身的生命周期，只有两个简单的 路由级别的钩子 beforeRouteEnter beforeRouteLeave
那么接下来：
　　ajax调用时机：相对于组件来说的，而且应该是在路由进入之前开始准备的 所以beforeRouteEnter是调用ajax的时机。 实际项目中一般我是在created钩子函数中，上面说的没试过。
watch这一函数可以监听路由$route变化。beforeRouteLeave在组件的生命周期完成后，且旧路由即将切换走，新路由beforeEach的时机执行。
watch的使用时机：
当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。
不过，这也意味着 组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：

参考原文：https://www.cnblogs.com/faith3/p/6224235.html