vue在删除列表数据后会主动刷新页面并刷新示例

1.现场

在处理列表时，经常需要在删除一段数据或添加新数据后刷新当前页面。

2.遇到的问题

1.使用vue-router重新路由到当前页面，页面将不会被刷新

2.使用window.reload()或router.go(0)刷新时，整个浏览器重新加载并闪烁，体验不佳

3.解决方法

提供/注入的组合

功能：允许一个祖先组件向它的所有后代注入一个依赖，不管组件层次有多深，它总是会在建立上下游关系的时候生效。

App.vue:

声明重载方法来控制路由器视图的显示或隐藏，从而控制页面的重载

tableList.vue:

App.vue组件提供的重载依赖注入到页面中，逻辑完成后(删除或添加.)，可以直接调用this.reload()来刷新当前页面。

4.provide/inject用法

提供：选项应该是返回对象的对象或函数。该对象包含可以注入其后代的属性。

Inject:字符串数组，或其键是本地绑定名称的对象

提示：提供和注入绑定没有响应。这是故意的。如果您传入一个可监视的对象，它的对象属性仍然是响应的。

==========================================

对数据驱动有深刻的理解

以上是开发过程中的一个坑。过了一段时间，今天再看代码的时候，觉得坑得厉害。

1.获取列表方法

2.正在检索数据

3.通过再次调用获取数据，可以同步更新页面数据(页面不会再次刷新)，同时当有分页时，可以停留在当前页面(如果是刷新前的第二页，刷新后会停留在第二页)。

即其他查询条件不变，体验效果良好。

以上vue主动刷新页面，删除列表数据的例子，都是边肖分享的内容。希望能给大家一个参考，支持我们。