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、/qq_32555123/article/details/124627017
2、/article/233809.htm
如果觉得《vue实现页面刷新以及局部刷新的方法》对你有帮助,请点赞、收藏,并留下你的观点哦!