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配置代理服务器proxy 多种方法,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
组合式API为Vue3带来了更好的逻辑组织和复用性,支持TypeScript,提供灵活的响应式系统,它允许开发者将相关逻辑组合在一起,通过composable函数实现逻辑复用,摆脱了mixin的缺点,同时,组合式API与TypeScript的集成更紧密,能够提供更准确的类型推断2024-10-10
这篇文章主要介绍了vue如何实现动态的选中状态切换效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文主要介绍了webpack开发vue-cli的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了vue路由的相关资料，文中讲解非常细致，帮助大家更好的理解和学习vue路由知识，感兴趣的朋友可以了解下2020-08-08
Nuxt3项目搭建过程(Nuxt3+element-plus+scss详细步骤)
这篇文章主要介绍了Nuxt3项目搭建（Nuxt3+element-plus+scss详细步骤）,本次记录一次使用Nuxt3搭建前端项目的过程，内容包含Nuxt3的安装，基于Vite脚手架（默认）构建的vue3项目，element-plus的安装配置，scss的安装，目录结构的创建和解释，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue-cli 如何将px转化为rem适配移动端,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
这篇文章主要介绍了Vue.js的动态组件模板的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Element DateTimePicker日期时间选择器的使用示例
这篇文章主要介绍了Element DateTimePicker日期时间选择器的使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了vue-cli中的图片资源存放位置，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论