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,只要该组件触发过一次,则会在其他页面也会触发
	}
}

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

前往低代码交流专区

更多推荐