vue beforeRouteEnter 死循环的问题

佚名 6年前 (2019-04-22) 随笔 1525人围观抢沙发百度已收录

如果在 vue 组件的 beforeRouteEnter 钩子函数中调用 API 请求，会出现循环执行的问题：

  1 beforeRouteEnter(to, from, next) {
  2   login().then(() => {
  3     next({ name: 'home' });
  4   }).catch(() => {
  5    next();
  6   });
  7 },
  8

上面的代码会出现无限循环调用的问题，可能是API还没有请求完成，又一次进入 router，调用了 beforRouterEnter 的原因，解决办法加一个变量，在调用API之前判断一下：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

  1 let request = false;
  2 
  3 beforeRouteEnter(to, from, next) {
  4 	if (request) {
  5 	  next();
  6 	  return;
  7 	}
  8 
  9   request = true;
 10   login().then(() => {
 11     next({ name: 'home' });
 12   });
 15 },
 16