1,故障现象
一个vue2的前端程序,需要根据浏览的设备类型来进入不同的path。
具体说就是PC端和手机端的home页面是分开来写的,PC端的home路径是“/home”,手机端的home路径是“/mhome”
用户点击进入程序的超链接的路径写死是进入“/home”路径(如“http://xx.yy.zz/app/home”),但是需要在进入“/home”时再次判断设备类型,如果是移动设备就跳转到“/mhome”路径。
代码如下:
home.vue mounted() { if (this.isMobile()) { alert('isMobile'); this.$router.push('/mhome'); } else { alert('not Mobile'); } 。。。。其它PC端代码
结果在手机上测试,跳出了“isMobile”信息,但是最终显示的界面并不是“/mhome”的内容,而是仍然是“/home”下的内容,也就是说以下代码执行无效:
this.$router.push('/mhome');
2,原因分析
按理来说,this.$router.push代码应该能将路由跳转到新页面,但是测试结果显示无效。
将代码改换成
this.$router.replace('/mhome');
结果依然无效。
后来发现,mounted()后续的代码块中,又执行了其它跳转,
1 mounted() { 2 if (this.isMobile()) { 3 alert('isMobile'); 4 this.$router.push('/mhome'); 5 6 } else { 7 alert('not Mobile'); 8 } 9 10 。。。 11 。。。 12 if (jumpInfo != null) { 13 let opcode= jumpInfo.opcode; 14 if (opcode == 'score') { 15 this.$router.replace('/xxx'); 16 } 17 } else { 18 this.$router.replace('/yyy'); 19 }
以上第15/18行执行了新的跳转,将原本准备执行的“/mhome”跳转给覆盖了。这就是跳转失效的原因所在。
3,解决方案
既然找到了原因,解决方案就简单了。在跳转后立即return,避免继续往下执行即可。
mounted() { if (this.isMobile()) { alert('isMobile'); this.$router.push('/mhome'); return; } else { alert('not Mobile'); }
代码如上修改后,测试通过。
4,总结
本问题的发生和解决显示,vue代码在执行路由操作时,不是同步阻塞型的,而是异步非阻塞型。
即调用 this.$router.push 代码后,一方面开始准备跳转,同时代码也继续向下执行,一旦二者有路由冲突,那么结果就是难以预料的了。
标签:mhome,home,故障,跳转,push,router,isMobile From: https://www.cnblogs.com/jackkwok/p/17326634.html