vue中利用provide和inject实现页面刷新(无白屏)重载组件。
项目当中有个流程回退的需求,如下流程图: 需求: 点击某个节点,输入回退原因,调用后台接口回退成功之后,想刷新流程图。 想法1: 调用接口成功后,在调用一次渲染流程图的方法。 结果: 在容器中显示了两个流程图,一个旧的一个新的,改起来较麻烦,pass掉 想法2: 调用接口成功后,刷新一下当前页面,window.reload和this.$router.go(0)来刷新页面, 结果: 这种方案会造成页面全部刷新,有短暂的白屏效果,体验太差。 想法3: 调用接口成功后,利用this.$forceUpdate()来刷新页面, 结果: 没啥用,一般修改数据,dom不刷新的时候用这个api有点效果,我这种情况好像不适用,也懒得再想别的了。 想法4: 新建一个空页面,先跳转到空页面,然后瞬间跳转回流程图页面,即可实现页面流程图刷新。(太麻烦了,还需要建一个空页面) 想法5: 利用inject和provide实现组件局部刷新,体验较好,也能达到需求。 ①改造App.vue如下: ②在你想刷新组件的组件中注入reload方法 ③后台返回"000000"成功之后调用this.reload重载,完美解决。 注: 页面如果有新增一条数据或者删除一条数据,需要重新调用后台查数据的方法,成功之后,在把getList方法重新执行一下。但上述这种方式也能实现。比较优雅,后续可以用这种方式查询数据渲染页面。 来源: