详解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 相关文章推荐
js 纯数字不重复排列的另类方法
Jul 17 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
Javascript中的 “&” 和 “|” 详解
Feb 02 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
如何更好的编写js async函数
May 13 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
详解JavaScript自定义函数
Jul 29 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 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时的知识积累总结
2013/06/07 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
jquery.validate使用攻略 第一部
2010/07/01 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
2019/12/22 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python列表推导式入门学习解析
2019/12/02 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
幼儿园中班评语大全
2014/04/17 职场文书
产品设计开发计划书
2014/05/07 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
房产协议书范本
2014/10/18 职场文书
2014年党支部工作总结
2014/11/13 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS