详解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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
微信小程序如何连接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 md5下16位和32位的实现代码
2008/04/09 PHP
php 一元分词算法
2009/11/30 PHP
php继承的一个应用
2011/09/06 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
深入php内核之php in array
2015/11/10 PHP
9个比较实用的php代码片段
2016/03/15 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
php array_map()函数实例用法
2021/03/03 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
vue注册组件的几种方式总结
2018/03/08 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
python中xrange和range的区别
2014/05/13 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Python实现将xml导入至excel
2015/11/20 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python算法题 链表反转详解
2019/07/02 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
关于Assembly命名空间的三个面试题
2015/07/23 面试题
教师实习期自我鉴定
2013/10/06 职场文书
法学专业本科生自荐信范文
2013/12/17 职场文书
婚前协议书范本
2014/04/15 职场文书
单位授权委托书范本
2014/09/26 职场文书
工作检讨书范文
2015/01/23 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
婚宴父亲致辞
2015/07/27 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技