vue解决刷新页面时会出现变量闪烁的问题
更新时间：2022年01月24日 14:44:08 作者：YOYO__2018
这篇文章主要介绍了vue解决刷新页面时会出现变量闪烁的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
刷新页面时会出现变量闪烁问题
在使用vue绑定数据的时候，刷新页面时会出现变量闪烁，
解决办法是: v-cloak
将代码修改如下：
<div class="#app" v-cloak>
<p>{{value.name}}</p>
</div>vue刷新当前页面，且页面不闪烁
场景：
- 在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。
- 需要切换中英文的网站，
- 大体概念就是页面数据发生改变需要重新获取数据或刷新当前页时
刷新当前页的方法
- 使用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，用户体验不好
- provide/inject 组合
provide/inject 组合介绍
作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深
provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。(注意：子孙层的provide会掩盖祖父层provide中相同key的属性值)inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值，from是在可用的注入内容中搜索用的 key (字符串或 Symbol)，意思就是祖父多层provide提供了很多数据，from属性指定取哪一个key;default指定默认值。
provide/inject 组合如何实现页面不闪烁刷新
在 App.vue 内声明 reload 方法，控制 router-view 的显示或隐藏，从而控制页面的再次加载
<template>
<div id="app" v-if="isRouterAlive">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
export default {
name: 'App',
provide() {
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加…）,在子组件内引入（inject）然后直接this.reload()调用，即可刷新当前页面。
export default {
inject: ['reload'],
methods: {
login() {
this.reload()
}
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了解决Vue @submit 提交后不刷新页面问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
下面小编就为大家分享一篇Vue-Router2.X多种路由实现方式总结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览),最后选择了pdf.js插件,这篇文章主要介绍了Vue中使用pdf.js实现PDF文档展示功能的相关资料,需要的朋友可以参考下2025-04-04
这篇文章主要为大家详细介绍了vue.js源代码core scedule.js的学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
Vue的小伙伴们,困扰大家的IE浏览器支持Vue的问题,目前已经找到了一个比较好的解决方案,下面这篇文章主要给大家介绍了关于vue项目兼容IE浏览器的教程步骤,需要的朋友可以参考下2023-03-03
Vue.js的组件可以理解为预先定义好了行为的ViewModel类。这篇文章主要介绍了Vue.js组件使用开发实例教程的相关资料,需要的朋友可以参考下2016-11-11
这篇文章主要为大家详细介绍了vue实现右侧滑出层动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
本文介绍了如何在项目中创建和使用自定义插件,以在构建过程中检查版本号,具体步骤包括在项目根目录下创建buildLifeHook.ts文件,并在public目录下创建version文件夹,然后在vite.config.ts中引用该插件,并在src/utils目录下创建XxzUtils.ts文件2024-12-12
这篇文章主要介绍了Vue getter setter，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
今天小编就为大家分享一篇关于Vue项目安装插件并保存，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
最新评论