详解vue beforeRouteEnter 异步获取数据给实例问题


Posted in Javascript onAugust 09, 2019

场景: vue-router 路由钩子 beforeRouteEnter 可以用来在初始进入页面前,http 异步获取数据 mockData ,预先判断是进入 A 页、还是 B 页,还是留在本页;而如果留在本页的话,还需要在 mounted 根据 mockData 来判断显示哪种状态(可以在本页面实例创建后,重新发起 http 请求获取 mockData ,但是没有必要,造成代码冗余);

执行顺序:

async beforeRouteEnter(to, from, next) {
   let res = await gameData()
   console.log('beforeRouteEnter start');
   next(vm => {
    console.log("vm start")
    vm.is_exchange = res.is_exchange
    vm.is_finish = res.is_finish
   })
 },
 beforeCreate() {
  console.log("beforeCreate start")
 },
 mounted(){
  console.log('mounted start');
  if(this.is_finish){
   this.modalMsg="活动已结束"
   return;
  }
  if(this.is_exchange){
   this.modalMsg="您已兑换奖品"
   return;
  }
 }

打印结果如下:

beforeRouteEnter start

beforeCreate start

mounted start

vm start

由打印结果,我们可以总结 beforeRouteEnter 钩子确实在 vue 实例创建前执行,但是其 next 函数中 vm 回调不是同步执行,而是等到 mounted 执行完之后,才执行 。

症结:因为我们要根据 mockData 中的 is_exchange 和 is_finish 参数来判断决定页面初始状态,此过程需要在 mounted 中执行;但是 mounted 执行时, vm 还未执行,即 mounted 拿不到

is_exchange 和 is_finish 这两个值,这样就造成了冲突;

解决:在 next 中 打印 vm ,发现 vm 就是当前 vue 实例对象,即可以使用 vm 调用所有当前实例的变量和方法;那依次,能否将判断逻辑写入 methods 中一个方法中,使用 vm 来调用呢?

async beforeRouteEnter(to, from, next) {
   let res = await gameData()
   console.log('beforeRouteEnter start');
   next(vm => {
    console.log("vm start")
    vm.is_exchange = res.is_exchange
    vm.is_finish = res.is_finish

    vm.judge();//赋值之后,此处调用判断方法
   })
 },
 beforeCreate() {
  console.log("beforeCreate start")
 },
 mounted(){
  console.log('mounted start');
 },
 methods:{
  judge(){// 将判断逻辑写入judge方法
  if(this.is_finish){
   this.modalMsg="活动已结束"
   return;
  }
  if(this.is_exchange){
   this.modalMsg="您已兑换奖品"
   return;
  }
  }
 }

至此,问题解决。有同学可能会问,在 vm 中调用 judge 方法时, mounted 已执行,此时页面已渲染,再去判断初始状态,会不会有闪烁问题?本人经过测试,发现不会,据此推断,在 mounted 执行结束之后,页面没有开始更新动作,而是在执行完 vm 回调之后,再去渲染。这样的话,逻辑上就行得通了,但是这个只是推断,还需要在源码层面找到依据才可以。

github地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 显示当前系统时间代码
Dec 28 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
用console.table()调试javascript
Sep 04 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
关于vue-router的那些事儿
May 23 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
微信小程序如何连接Java后台
Aug 08 #Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 #Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 #Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 #Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 #jQuery
微信小程序嵌入腾讯视频源过程详解
Aug 08 #Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 #Javascript
You might like
php 日期时间处理函数小结
2009/12/18 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
javascript引用对象的方法
2007/01/11 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
python导入库的具体方法
2020/06/18 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
公司人力资源的自我评价
2014/01/02 职场文书
行政副总岗位职责
2014/02/23 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
安全生产月宣传标语
2014/10/06 职场文书
社区低保工作总结2015
2015/07/23 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers