vue实现页面刷新以及局部刷新的方法

1、利用Vue里面的provide+inject组合，实现全页面刷新

通过在APP页面进行demo进行刷新，不会像前两种那样出现短暂的闪烁效果，提升用户体验，通常可以使用这种方式

（1）在APP页面中写入下面代码

<template><div id="app"><router-view v-if="isShow"/></div>
</template><script>
export default {name: 'App',provide(){return{reload:this.reload}},data(){return{isShow:true}},methods:{reload(){this.isShow=false;this.$nextTick(()=>{this.isShow=true})}}
}
</script>

（2）在需要刷新的页面进行引入并使用

<template><div><div class="header"><button @click="update()">刷新页面</button></div></div>
</template><script>
export default {data(){return{}
},
inject:['reload'
],
methods:{update(){this.reload()console.log('刷新页面')}
}
}
</script>

2、实现页面中局部刷新

（1）定义局部刷新的方法 reload：

<template><div v-if="isShow" class="sub-wrapper"><PieChart :chartData="list" /></div>
</template>
<script>
export default{data(){return{isShow: true,}},methods: {reload () {//局部刷新this.isShow = false;this.$nextTick(() => {this.isShow = true})},}
}
</script>

（2）在需要执行局部刷新的方法中进行调用

Refresh() {this.reload()WorkorderStateReport().then((res) => {this.loading = true;if (res.data.length > 0) {this.list = res.data;}});
},

参考链接：
1、https://blog.csdn.net/qq_32555123/article/details/124627017
2、https://www.jb51.net/article/233809.htm

vue实现页面刷新以及局部刷新的方法相关推荐

Servlet向JSP传递数据以及JSP页面DIV定时局部刷新
系列文章: ESP8266的AP模式与STA模式简单测试简单的Java服务器和客户端的通信 STM32 ESP8266和Java服务器透传模式下的双向通信 jsp向servlet传输数据 Servl ...
全局刷新和局部刷新的理解
一.全局刷新和局部刷新全局刷新:使用form.href等发起的请求是全局刷新解释:用户发起请求,视图改变了跳转视图,使用新的数据填充页面. 缺点: 传递数据比较大,占用网络带宽浏览器需要重新的渲 ...
php验证码刷新_php验证码刷新与局部刷新
欢迎进入Linux社区论坛,与200万技术人员互动交流 >>进入实现php 验证码调用时的刷新与局部刷新,这二种情况在网站开发中均有使用. 一.验证码刷新代码示例: form meth ...
vue 全局刷新与局部刷新
首先说下区别: 全局刷新:是指页面整体刷新,会出现空白,闪烁的情况局部刷新:是指某个进行重构加载,不会出现空白全局刷新: App.vue <template><div id=&q ...
js实现页面指定区域局部刷新
以下总结了一些常用的前端刷新页面的方法: <a href="javascript:" onclick="history.go(-2); ">返回前两 ...
Js控制页面刷新（局部刷新全页面刷新）
局部刷新: 这个方法就多了去了,常见的有以下几种: $.get方法,$.post方法,$.getJson方法,$.ajax方法如下前两种使用方法基本上一样 $.get("Default. ...
java验证码局部刷新_JS局部刷新图形验证码
开发过程当中,网络安全采取的方法之一,采用验证码功能.一般在注册.登录的程序当中见得比较多.其自己在实现这一功能时,静态页面有一段调用图形验证码的PHP文件,//,验证码是随机生成的,一般将生成的验证 ...
flutter怎么手动刷新_flutter局部刷新的实现示例
局部刷新我们在做项目的时候,都需要单独的去刷新一个值,而不是把整个界面都重绘.大家都知道setState是进行重绘的一个方法,他会执行生命周期的一个build,这将会使得整个界面来进行重绘.当然我们 ...
js本地刷新和局部刷新
最近做项目有个问题一直困扰了我很久了,今天灵机一动搞定了,就是jQuery的click事件我调用ajax后就不能二次点击了,本次做的是某个商品的启用和禁用,本来是用ajax调用后台程序,成功后局部刷新 ...

vue实现页面刷新以及局部刷新的方法

1、利用Vue里面的provide+inject组合，实现全页面刷新

2、实现页面中局部刷新

vue实现页面刷新以及局部刷新的方法相关推荐

最新文章

热门文章