接上回

想加一个切换路由时,跳出一个loading动画 ,路由加载后就消失

先做了一个loading提示的浮动层的组件,全局注册,在几个路由页面都引入

在vuex里面维护一个变量比如isLoading:false,用于是否显示loading组件

在loading组件中以computed方式自动依赖这个变量

在路由的beforeEach里面:

router.beforeEach((to,from,next)=>
store.commit('setLoading',true)
next()
});

路由加载后,就设为false (注意,afterEach里面没有next)

router.afterEach((to,from) =>{
store.commit('setLoading',false)
});

测试了一下,很奇怪,有时可以显示loading,有时不显示

用浏览器vue开发插件查看vuex变量isLoading,有时不变有时变

但每次切换路由都能控制台打印出消息

由于今天用的是08年的狗血笔记本,真特么 狗血笔记本出狗血事件,装win7运行特慢,编译也慢,

切换vscode竟然也要几秒,蠢货sublime竟然莫名其秒老是占满cpu

折腾了2小时,突然想到,把next()放在定时器里面,延迟500ms

没想到竟然可以了,猜测是next()执行下一个路由太快了

导致isLoading变量显示太快,loading动画来不及闪

vue实战之狗血事件:页面loading效果诡异之事的更多相关文章

  1. 页面loading效果

    当网页太大,打开太慢的时候,为了增加良好的用户体验(不让用户眼巴巴的等,心中暗骂c,这么慢),我们需要加一个等待动画. 只需把以下代码加入页面中即可,图片可以根据自己的需求更换,更换图片之后需要改变l ...

  2. 前端页面loading效果(CSS实现)

    当首页内容或图片比较多时,加载时间会比较长,此时可能出现页面白屏的情况,用户体验较差.所以,在页面完全加载出来之前,可以考虑加入loading效果,当页面完全加载完后,是loading消失即可. 1. ...

  3. JQuery实现页面Loading效果

    第一步:添加遮罩层和LOADING层 <div class="overlay"></div><div id="AjaxLoading&quo ...

  4. appcloud 加载第三方页面loading效果

    apiready = function() { var header = $api.byId('header'); $api.fixIos7Bar(header); var headerPos = $ ...

  5. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  6. vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现

    1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...

  7. Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...

  8. vue中iframe加载慢,给它加loading效果

    js框架:vue ui框架:element 因为iframe加载慢,所以在它加载完成前添加loading效果,loading用的是element家的加载效果 <template> < ...

  9. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

随机推荐

  1. pycharm 调试 scrapy

    http://blog.csdn.net/shijichao2/article/details/61940931

  2. 班级博客与coding地址

    队名 队长 成员1 成员2 成员3 成员4 成员5 团队博客地址 奥特曼小分队 李全清 胡林状 王栋 孙杏子 孙乐 刘泽良 http://www.cnblogs.com/atmxfd/ 蜗牛上天队 仝 ...

  3. 使用Visual Studio 2013进行单元测试

    使用Visual Studio 2013进行单元测试 1.打开VS2013 --> 新建一个项目.这里我们默认创建一个控制台项目.取名为UnitTestDemo 2.在解决方案里面新增一个单元测 ...

  4. PAT 甲级 1090 Highest Price in Supply Chain

    https://pintia.cn/problem-sets/994805342720868352/problems/994805376476626944 A supply chain is a ne ...

  5. RocketMQ 事务消息

    RocketMQ 事务消息在实现上充分利用了 RocketMQ 本身机制,在实现零依赖的基础上,同样实现了高性能.可扩展.全异步等一系列特性. 在具体实现上,RocketMQ 通过使用 Half To ...

  6. 新安装的Ubuntu设置root密码

    一.问题描述 新安装的Ubuntu切换到root用户时如果没有设置root用户密码会操作失败.此时需要先设置root用户密码. 二.解决办法 打开终端执行 sudo passwd 命令. 输入设置的密 ...

  7. Redis的相关问题总结

    一.Redis的优缺点及适用场景 Redis 是一个基于内存的高性能key-value数据库.很像memcached,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到硬盘 ...

  8. npm 报错unable to verify the first certificate

    npm总是报错:unable to verify the first certificate 原创 2017年09月30日 11:06:10 https://blog.csdn.net/nicexib ...

  9. Eclipse 的控制台console乱码

    乱码!Eclipse 的控制台console必须用GBK编码. Eclipse 的控制台必须用GBK编码.所以条件1和条件4必须同时满足否则运行的还是乱码.才能保证不是乱码. 条件1,Window   ...

  10. MT【80】单调性求函数表达式

    提示:$f(f(f(x)-lnx)-ln(f(x)-lnx))=1+e=f(f(x)-lnx),\because f(x)$单调.得: $f(f(x)-lnx)-ln(f(x)-lnx)=f(x)-l ...