通过在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>
也可以由此实现页面中局部刷新:
html:
<div v-if="isShow" class="sub-wrapper">
<PieChart :chartData="list" />
</div>
js:
data(){
return{
isShow: true,
}
},
methods: {
reload () {//局部刷新
this.isShow = false;
this.$nextTick(() => {
this.isShow = true
})
},
}
使用:
//刷新工单状态
RefreshWoState () {
this.reload()
WorkorderStateReport().then((response) => {
this.loading = true;
if (response.data.length > 0) {
this.list = response.data;
// console.log(this.list,"shuju")
}
});
},