详解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 相关文章推荐
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
Jquery-data的三种用法
Apr 18 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
手把手教你实现 Promise的使用方法
Sep 02 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的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
Python入门篇之文件
2014/10/20 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
公司庆典邀请函范文
2014/01/13 职场文书
自荐书4要点
2014/01/25 职场文书
有趣的广告词
2014/03/18 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
师范类求职信
2014/06/21 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书