Vue单页刷新页面时出现闪烁问题该如何解决？

本文共计1024个文字，预计阅读时间需要5分钟。

目录+分析原因：为什么刷新会出现闪烁的问题？解决方案：使用+v-cloak+用法+关于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掉，这样就可以实现防止节点的闪烁。