单页面Vue页面刷新出现闪烁问题及解决

目录
  • 分析原因: 为什么刷新会出现闪烁的问题?
  • 解决方法: 使用 v-cloak 用法
  • 关于Vue刷新页面问题
    • 如何解决
    • provide / inject 组合

分析原因: 为什么刷新会出现闪烁的问题?

因为浏览器是html从上到下执行，

先执行Dom元素

然后执行javaScript元素

当走到javaScript时，Dom元素已经开始走动，所以如果网慢的话，会显示的特别明显

解决方法: 使用 v-cloak 用法

v-cloak指令 和 css规则 [v-cloak] {display:none} 一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

原理：

带有v-clock的的元素设置为display:none，隐藏掉，在等到vue解析到带有v-clock的节点时候，会把attribute和class同时remove掉，这样就可以实现防止节点的闪烁。

实例：

[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>

图解：

html 代码

加在挂载点(#app),可以让整个页面在未加载完JS时,整个页面都不渲染, 如果不需要,只需要在对应闪烁的标签中加v-cloak即可

css 代码

关于Vue刷新页面问题

Vue 中是单页面，当然需要刷新数据咯

你一定遇到这样的需求：

比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者这个页面有个组件 ，但是这个组件里面的点击事件还是到当前页面

如何解决

1.在使用Vue-router做项目时，会遇到如/serviceId/:id这样只改变id号的场景。由于router-view是复用的，单纯的改变id号并不会刷新router-view，而这并不是我们所期望的结果。

2.我们可以在点击事件上  window.reload()，或者router.go(0)刷新时，强制刷新整个页面。整个浏览器进行了重新加载，闪烁，体验不好

3.使用watch的方法，具体的可以看一下官方文档

watch: { 
'$route': function (to, from) { 
       this.$store.dispatch('updateActiveTemplateId', 
       this.$route.params.templateId) // 通过更新Vuex中的store的数据，让数据发生变化 
           this.getTemplateById() 
} }

当然我也看过一些博客，总结了下 如何更好的解决

provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

在你的App.vue页面里面

声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载

然后在你的详情页面

tableList.vue:

在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加...）,直接this.reload()调用，即可刷新当前页面。

解释下：

  • provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
  • inject：一个字符串数组，或一个对象，对象的 key 是本地的绑定名

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

当然你不能 是在created里调用getData(), 在getData里又调用了this.reload().

这样会导致死循环的 ，所以要合理的运用就这个方法

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue数据变化但页面刷新问题

    目录 vue数据变化但页面刷新 watch监听到数据的变化但页面没有刷新 没有监听到数据的变化 改变了数据却没有自动刷新 说下结论 vue数据变化但页面刷新 watch监听到数据的变化但页面没有刷新 在数据改动的代码后加 this.$forceUpdate(); 添加this.$forceUpdate();进行强制渲染,效果实现.因为数据层次太多,render函数没有自动更新,需手动强制刷新. 没有监听到数据的变化 例如: 改变了数组中的某一项或者改变了对象中的某个元素时,监听则未生效. 数组若

  • Vue实现父子组件页面刷新的几种常用方法

    Vue实现父子组件页面刷新的几种常用方法

    目录 1.原地页面重新加载(不推荐) 2.空白页面作为过渡 3.使用Provide / Inject组合控制显示 4.v-on:param父组件监听子组件事件 参考文档: 很多时候我们在操作过页面时候,特别是增删改操作之后,数据会有所改变,这个时候我们希望返回的界面中的数据要和数据库中的数据进行同步,就需要刷新当前页面,如果是使用ajax可以使用异步请求实现页面的局部刷新,Vue常用的几种刷新页面方法如下: 1.原地页面重新加载(不推荐) this.$router.go(0) //根据路由重新定

  • vuex页面刷新数据丢失问题的四种解决方式

    目录 为什么说刷新页面vuex的数据会丢失 第一种方法用sessionStorage 第二种方法是 vuex-along 示例如下 第三种方法是 vuex-persistedstate 示例如下 第四种方法是 vuex-persist 示例如下 结语: 为什么说刷新页面vuex的数据会丢失 刷新页面vuex的数据会丢失属于正常现象,因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是浏览器的运行机制,那么堆栈里的数据自然就清空了. 第一种方法用sess

  • 解决vue页面刷新产生白屏的问题

    目录 vue页面刷新产生白屏 vue页面白屏的原因及优化 一.原因 二.解决办法 vue页面刷新产生白屏 app.vue <template>   <div id="app">     <router-view v-if="isRouterAlive"></router-view>   </div> </template> <script> export default {   pr

  • vue实现页面刷新动画

    vue实现页面刷新动画

    本文实例为大家分享了vue实现页面刷新动画的具体代码,供大家参考,具体内容如下 做一个vue的页面刷新动画,找了好多动画样式,感谢大佬们造的轮子. 主要就是在index.html文件里面写一个动画样式,在页面刷新的时候让他去前面做动画,等我们的样式可以加载的时候去把这个动画样式给移除掉就可以了,而判断我们的样式是否加载好可以用created生命周期去判断,因为这个生命周期是在浏览器解析完html的各种样式后触发的,所以可以在app.vue的created生命周期里面把动画样式移除 接下来是代码

  • 单页面Vue页面刷新出现闪烁问题及解决

    单页面Vue页面刷新出现闪烁问题及解决

    目录 分析原因: 为什么刷新会出现闪烁的问题? 解决方法: 使用 v-cloak 用法 关于Vue刷新页面问题 如何解决 provide / inject 组合 分析原因: 为什么刷新会出现闪烁的问题? 因为浏览器是html从上到下执行, 先执行Dom元素 然后执行javaScript元素 当走到javaScript时,Dom元素已经开始走动,所以如果网慢的话,会显示的特别明显 解决方法: 使用 v-cloak 用法 v-cloak指令 和 css规则 [v-cloak] {display:no

  • 解决vue单页使用keep-alive页面返回不刷新的问题

    使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成

  • 解决vue页面刷新或者后退参数丢失的问题

    在toB的项目中,会经常遇到列表数据筛选查询的情景,当要打开某一项的详情页或者暂时离开列表页,再返回(后退时),选择的筛选条件会全部丢失,辛辛苦苦选择好的条件全没了,还得重新选择,如果有分页的更头大,还得重新一页页翻到之前看到的那一页,用户体验极度不友好. 我的解决有两种: 第一种方法:用vue 的<keep-alive>,即在<router-view>外套一层<keep-alive>. 虽然可以达到一定效果,但是控制起来比较麻烦,比如项目中并不是所有页面都需要缓存,代

  • vue主动刷新页面及列表数据删除后的刷新实例

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue: 声明reload方法,控制

  • 解决vue单页面 回退页面 keeplive 缓存问题

    场景:项目中遇到 vue 点击回退 从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1.在app.vue中改写router-view <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!

  • vue返回上一页面时不刷新问题及解决方案

    目录 返回上一页面时不刷新 前景 思路 说明 页面回退后,不刷新问题 问题描述 问题解决 返回上一页面时不刷新 前景 在日常使用的时候,我们经常需要返回上一级页面的时候,不刷新页面,保持页面不变,这里就需要使用以下方法: 思路 因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为: (1).在App.vue中加入 这里是所有页面切换到地方,下面代码分别对不同的设置,采用不同的渲染方式. <template>   <div id="ap

  • Ajax提交Form表单页面仍会刷新问题的快速解决办法

    搞了半天原来点击提交按钮 少加了个type="button"  原来是  <form >  <button id="sub" />   </form>  结果怎么弄都会刷新页面,加上就好了  PS:form 表单中存在button时ajax提交后自动刷新问题 //在记一个坑(刚学前台,不是很懂,项目中自己给自己挖了个坑,哈哈...) <form class="form-horizontal"> &l

  • 解决vue 路由变化页面数据不刷新的问题

    每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击 按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入

  • vue页面加载闪烁问题的解决方法

    v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho

随机推荐