vue路由守卫 —— 组件内beforeRouteEnter

beforeRouteEnter
在渲染该组件的对应路由被确认前调用，用法和参数与beforeEach类似，next需要被主动调用
注意：

• 此时组件实例还未被创建，不能访问this
• 可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数

beforeRouteEnter(to, from, next) {
  console.log(this); // 这里打印this是undefined
  console.log(to, '参数1:即将要进入的目标 路由对象');
  console.log(from, '参数2:当前导航正要离开的路由');
  console.log(next, '参数3:Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。意思就是next()一定要调用,要不然不会往下运行');
  next(vm => {
    //因为当钩子执行前，组件实例还没被创建
    // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
    console.log(vm);//当前组件的实例,可以进行操作
  });
}

• 可以在这个守卫中请求服务端获取数据，当成功获取并能进入路由时，调用next并在回调中通过 vm访问组件实例进行赋值等操作
• beforeRouteEnter触发在导航确认、组件实例创建之前：beforeCreate之前；而next中函数的调用在mounted之后：为了确保能对组件实例的完整访问

与watch监听路由的区别:

watch:{
	$route(newVal,oldVal){
		//组件内写watch,只要该组件触发过一次,则会在其他页面也会触发
	}
}

随记,有时间再补全.有疑问请留言