vue实现在进行增删改操作后刷新页面

问题

通常在后台管理项目中，对数据进行增删改查是常规操作。在进行这些操作后，需要手动刷新才能更新列表。本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后的最新数据。

解决方案 || 以删除为例：

1.强制刷新：this.$forceUpdate()

2.使用window.reload( ) 或 router.go(0)，但会使整个浏览器进行重载，页面闪烁。

3.重新调用接口:但性能较差，代码冗长。

4.provide / inject ：（推荐）

点此查看VUE官方解释：

允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

首先在App.vue全局设置provide

在调用接口操作成功后 this.reload( )

比如在删除接口调用成功后：

tableList.vue:

在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加...）,直接this.reload()调用，即可刷新当前页面。

2.重新获取数据

3.这样再次调用获取数据，即可同步实现页面数据更新（不会重新刷新页面），同时保证有分页时，能够停留在当前页（刷新前如果是第二页，刷新后依然在第二页），

即其他查询条件保持不变，体验效果好！

以上这篇vue实现在进行增删改操作后刷新页面就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持来客网。