vue刷新页面时去闪烁提升用户体验效果的实现方法

更新时间：2018年12月10日 15:43:23 作者：催晚

这篇文章主要介绍了vue刷新页面时去闪烁提升体验方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

首先在最外层div添加v-if="isReloadAlive"，并创建变量isReloadAlive = true

随后添加provide()以及reload方法，如下：

export default {
 provide() {
  return {
  reload: this.reload
  }
 },
 data(){
 isReloadAlive : true
 },
 methods: {
 reload() {
   this.isReloadAlive = false;
   this.$nextTick(function(){
    this.isReloadAlive = true;
   })
  }
 }

最后调用this.reload()即可

补充：下面看下vue解决刷新时闪烁问题

1.在vue容器的div里面加上 v-cloak

<div id="app" v-cloak>

2.样式文件中加上

 <style type="text/css">
  [v-cloak] {
   display: none !important;
  }
 </style>

总结

以上所述是小编给大家介绍的vue刷新页面时去闪烁提升体验方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

vue directive全局自定义指令实现按钮级别权限控制的操作方法
这篇文章主要介绍了vue directive全局自定义指令实现按钮级别权限控制,本文结合实例代码对基本概念做了详细讲解，需要的朋友可以参考下
2023-02-02
Vue路由回退的完美解决方案（vue-route-manager）
最近做了一个vue项目关于路由场景的问题,路由如何回退指定页面,在此做个记录,这篇文章主要给大家介绍了关于Vue路由回退的完美解决方案,主要利用的是vue-route-manager,需要的朋友可以参考下
2021-09-09
vue url跳转解析和参数编码介绍
这篇文章主要介绍了vue url跳转解析和参数编码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
这篇文章主要介绍了vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue 实现展开折叠效果的示例代码
这篇文章主要介绍了Vue 实现展开折叠效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
Vue实现文本展开收起功能
这篇文章主要为大家详细介绍了Vue实现文本展开收起功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue3如何通过provide和inject实现多层级组件通信
这篇文章主要介绍了vue3如何通过provide和inject实现多层级组件通信,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11
Vue页面跳转动画效果的实现方法
百度了好久都没办法实现vue中一个页面跳到另一个页面，甚至到google上搜索也是没办法的，最终还是找了高人亲自指导，所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法，需要的朋友可以参考下
2018-09-09
手把手教你用VUE封装一个文本滚动组件
封装组件相信对大家来说都不陌生了,下面这篇文章主要给大家介绍了关于用VUE封装一个文本滚动组件的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2023-01-01
element table跨分页多选及回显的实现示例
本文主要介绍了element table跨分页多选及回显的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02