Vue删除数据成功后如何刷新表格数据

刷新表格数据的方法：

1、this.$router.go(0)
2、location.reload()
3、跳转空白页再跳回原页面
4、控制的显示隐藏(最实用的方法)

刷新表格数据的方法：
1、this.$router.go(0)
这种方法页面会一瞬间的白屏，体验不是很好，虽然只是一行代码的事

2、location.reload()
这种也是一样，画面一闪，效果总不是很好

3、跳转空白页再跳回原页面
在需要页面刷新的地方写上：this.$router.push(’/emptyPage’)，跳转到一个空白页。在emptyPage.vue里beforeRouteEnter 钩子里控制页面跳转，从而达到刷新的效果

beforeRouteEnter (to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}

这种画面虽不会一闪，但是能看见路由快速变化

4、控制的显示隐藏(最实用的方法)
在App.vue中写如下代码

template>
<div id="app">
<router-view v-if="isShow"></router-view>
</div>
</template>

<script>
export default {
name: 'App',
provide () {
return {
reload: this.reload
}
},
data () {
return {
isShow: true
}
},
methods: {
reload () {
this.isShow= false
this.$nextTick(function () {
this.isShow= true
})
}
}

}
</script>

 

然后在需要刷新的页面引入依赖：inject: [‘reload’],

在需要执行的地方直接调用方法即可：this.reload()

 

————————————————
版权声明：本文为CSDN博主「星空浩荡」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45139342/article/details/107976362